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

webpack 把我们所有的文件都打包成一个JS文件，这样即使你是一个小项目，打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。

去除不必要的插件

刚开始用 webpack 的时候，开发环境合生产环境用的是同一个 webpack 配置文件，导致生产环境打包的 JS 文件包含了一大堆没必要的插件，比如 HotModuleReplacementPlugin， NoErrorsPlugin ... 这时候不管用什么优化方式，都没多大效果。所以，如果你打包后的文件非常大的话，先检查下是不是包含了这些插件。

提取第三方库

像 react 这个库的核心代码就有 627kb，这样合我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置。

{
    entry: {
        bundle: ['app'],
        //添加要打包在vendeors里面的库
        vendor: ['react', 'react-dom', 'jquery']
    },
    plugins: {
        //把入口文件里面的数组打包成vendors.js
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
    }
}

这样打包之后就会多出一个 vendor.js 文件，之后在引入我们自己的代码之前，都要先引入这个文件。比如在 index.html 中

<script src="/build/vendor.js"></script>
<script src="/build/bundle.js"></script>

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

{
    externals: {
        'reacct': 'React'
    }
}

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

<script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script>
<script src="/build/bundle.js"></script>

当然，个人更推荐第一种方式。

代码压缩

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 不然的话， webpack 在加载 chunk 的时候，路径会报错。

output: {
    path: __dirname + 'xx',
    publicPath: xxx,
    filename: 'bundle.js'
}

CSS 单独打包

有的时候需要将 css 单独打包，作为 CDN。
首先需要安装插件：

npm install extract-text-webpack-plugin --save-dev

然后在 webpack.config.js 中声明插件

// 引入 css 单独打包插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// 设置生成css 的路径和文件名，会自动将对应entry入口js文件中引入的CSS抽出成单独的文件
var packCSS = new ExtractTextPlugin('./css/[name].min.css');

在 plugins 中引入并使用

plugins: [
    packCSS
]

我们需要首先在 js 中引入想应的 css 文件

require('./css/plan.css');

然后这个插件会自动将js中的css文件提取出来，生成单独的文件.

图片的处理

安装 url-loader

npm install url-loader --save-dev

{
    test: /\.(png|jpg)$/, loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]'
}

设置缓存

对于静态文件，第一次获取之后，文件内容没改变的话，浏览器直接读取缓存文件即可。那如果缓存设置过长，文件要更新怎么办呢？嗯，以文件内容的 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 。
这样子，我们就可以把文件的缓存设置得很长，而不用担心更新问题。