性能优化小册 - 分类构建：利用好 webpack hash

借助 wepack 的 hash 命名法，不只能够提升咱们项目的构建效率，在生产环境中，合理设置 hash 类型有助于咱们对资源进行有效的缓存。

webpack hash 种类

当无情面试官问 webpack 有几种 hash 类型？

1. hash - 工程级

   若是出口文件设置的类型是 hash 则每次修改任何文件，全部文件名的 hash 都会跟着改变。（不能有效利用缓存）

2. chunkhash - 模块级

   根据不一样的入口文件进行依赖文件解析、构建对应的 chunk，生成对应的 hash 值。

3. contenthash - 文件内容级

   由文件内容产生的 hash 值，内容不一样产生的 contenthash 值也不同。

如何设置 hash 达到项目优化的目的？

js 文件分类构建，设置 chunkhash

首先使用 CommonsChunkPlugin 插件提取第三方库和公众模块，进行单独打包构建：

plugins: [
  new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor',
    minChunks (module) {
      return (
        module.resource &&
        /\.js$/.test(module.resource) &&
        module.resource.indexOf(
          path.join(__dirname, '../node_modules')
        ) === 0
      )
    }
  }),
]

接着咱们在 output 对 filename 和 chunkFilename 两个字段设置 chunkhash ，生成对应 hash 值：

output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'js/[name].[chunkhash].js', 
  chunkFilename: 'js/[id].[chunkhash].js' // chunkFilename 是处理异步模块的
},

经过设置 chunkhash 最后打包出来的 js 文件会生产三种 chunkhash：

1. 正常引入的 js 文件对应的 hash
2. 异步加载的 js 文件（若是在项目中存在的话）对应的 hash
3. 提取的三方库和公共模块对应的 hash

那么只要对应的 js 文件代码不改动，就能够保证其 chunkhash 值不会受影响，从而达到浏览器的持久缓存。

抽离 css，设置 contenthash

首先，使用 ExtractTextPlugin 插件将全部的入口 chunk 中引用的 *.css，抽离到独立的 css 文件夹中。

抽离以后的样式将再也不内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件当中，若是样式文件大小较大，这会作更快提早加载，由于 CSS bundle 会跟 JS bundle 并行加载。

plugins: [
  new ExtractTextPlugin({
    filename: 'css/[name].css',
    allChunks: true
  }),
]

以后对 css 文件进行 contenthash 命名：

plugins: [
  new ExtractTextPlugin({
    filename: 'css/[name].[contenthash].css',
    allChunks: true
  }),
]

针对 css 文件会生产对应的 contenthash 值，只要 css 文件内容没有修改，那么 contenthash 值就一直保持不变，以有效的利用浏览器缓存。

css 文件能够设置成 chunkhash 吗？

答案是不要这么作，由于 chunkhash 是模块级，咱们是将样式做为模块 import 到 js 文件中，因此它们的 chunkhash 是一致的。

即 js 和所引入的 css 共用同一个 chunkhash，只要 js 改变，与其关联的 css 文件对应的 chunkhash 值也会改变，但可能其内容并无改变，因此达不到缓存的效果。

这是 「性能优化小册」 系列第二篇小记，欢迎关注。