彻底解决 webpack 打包文件体积过大问题

{
 entry: {
  bundle: 'app'
  vendor: ['react']
 }

 plugins: {
  new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

 <script src="/UploadFiles/2021-04-02/vendor.js">

除了这种方式之外，还可以通过引用外部文件的方式引入第三方库，比如像下面的配置


{
 externals: {
   'react': 'React'
 }
}


externals 对象的 key 是给 require 时用的，比如 require('react')，对象的 value 表示的是如何在 global 中访问到该对象，这里是 window.React。这时候 index.html 就变成下面这样


<script src="/UploadFiles/2021-04-02/react.min.js">

当然，个人更推荐第一种方式。
目前推荐用 DLL 的方式提取第三方库。
代码压缩
webpack 自带了一个压缩插件UglifyJsPlugin，只需要在配置文件中引入即可。


{
 plugins: [
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
}


加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。
另外，服务器端还可以开启 gzip 压缩，优化的效果更明显。
代码分割
什么是代码分割呢？我们知道，一般加载一个网页都会把全部的 js 代码都加载下来。但是对于 web app 来说，我们更想要的是只加载当前 UI 的代码，没有点击的部分不加载。
看起来好像挺麻烦，但是通过 webpack 的 code split 以及配合react router 就可以方便实现。具体的例子可以看下 react router 的官方示例huge apps。不过这里还是讲下之前配置踩过的坑。
code split 是不支持 ES6 的模块系统的，所以在导入和导出的时候千万要注意，特别是导出。如果你导出组件的时候用 ES6 的方式，这时候不管导入是用 CommomJs 还是 AMD，都会失败，而且还不会报错！
当然会踩到这个坑也是因为我刚刚才用 NodeJS，而且一入门就是用 ES6 的风格。除了这个之外，还有一点也要注意，在生产环境的 webpack 配置文件中，要加上 publicPath


output: {
  path: xxx,
  publicPath: yyy,
  filename: 'bundle.js'
}


不然的话，webpack 在加载 chunk 的时候，路径会出错。
设置缓存
开始这个小节之前，可以先看下大神的一篇文章：大公司里怎样开发和部署前端代码。
对于静态文件，第一次获取之后，文件内容没改变的话，浏览器直接读取缓存文件即可。那如果缓存设置过长，文件要更新怎么办呢？嗯，以文件内容的 MD5 作为文件名就是一个不错的解决方案。来看下用 webpack 应该怎样实现


output: {
  path: xxx,
  publicPath: yyy,
  filename: '[name]-[chunkhash:6].js'
}


打包后的文件名加入了 hash 值


const bundler = webpack(config)

bundler.run((err, stats) => {
 let assets = stats.toJson().assets
 let name

 for (let i = 0; i < assets.length; i++) {
  if (assets[i].name.startsWith('main')) {
   name = assets[i].name
   break
  }
 }

 fs.stat(config.buildTemplatePath, (err, stats) => {
  if (err) {
   fs.mkdirSync(config.buildTemplatePath)
  }

  writeTemplate(name)
 })
})




手动调用 webpack 的 API，获取打包后的文件名，通过 writeTemplate 更新 html 代码。完整代码猛戳 gitst。
这样子，我们就可以把文件的缓存设置得很长，而不用担心更新问题。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。