前言:

webpack已经成为了目前最流行的打包工具，随着它的关注度越高，我们越来越关注它的性能优化，如何优化编译速度，减小打包体积...，这篇文章将讲述的是webpack编译时产生的三种hash

hash -- 编译产生

webpack在实例化的时候会在全局创建一个Tapable子类Compiler, 该实例掌握了初始化配置信息，运行编译入口函数，注册和调用插件等等。

每次编译的时候都会实例化一个对象compilation, 该对象掌控着从编译开始到编译结束文件，模块的加载，封闭，优化，分块，哈希，重建等等都是由其负责， 此时的hash是由compilation来创建的，也就是说每次编译都会创建一个新的hash值, 并且所有文件的hash都是一样的，因为是同一个compilation生成

第一次构建:

 

 

 

修改了app.js

第二次构建:

 

 

 

我们可以看出，所有的文件都发生了变化，坏处:

1. 编译时，导致所有文件重新编译了一次
2. 无法利用浏览器缓存策略，因为文件重新生成了

chunkhash -- 构建chunk生成

首先, 什么是chunk?

我们知道，每个入口文件都是一个chunk，每个chunk是由入口文件与其依赖所构成，异步加载的文件也被视为是一个chunk, chunkhash是由每次编译模块，根据模块及其依赖模块构成chunk生成对应的chunkhash, 这也就表明了每个chunk的chunkhash值都不一样， 也就是说每个chunk都是独立开来的，互不影响，每个chunk的更新不会影响其他chunk的编译构建

第一次构建

 

 

更改入口文件, 第二次构建

 

可以看出 main.js发生变化后，0.xxx.js并没有发生chunkhash变化，此时浏览器就可以利用缓存机制，对于没有更改的文件，浏览器会从缓存里取，可有效减小服务器压力与渲染速度等等

 

但是, 每个chunk都是有css与js组成, 也就是说当其中一个文件发生变化，这个chunk都会重新编译，此时contenthash就出来了。

contenthash

针对文件内容生成不同的hash, 只有当文件内容发生变化此hash才会重新生成，此时需要利用mini-css-extract-plugin插件取提取出每个chunk的css文件，将css与js隔离开，然后将css更改后

注意点

1. 输出js必须也是contenthash结尾， 如果是chunkhash，由于css已经发生变化了，整个chunk在编译时还是会生成新的hash，即使打包出的js内容没有发生变化
2. 如果入口文件没有依赖异步chunk，入口文件以contenthash输出不会重新编译，如果入口文件有依赖异步chunk， 那么不管入口文件以哪种hash形式输出，都会重新编译，因为css contenthash已经发生变化了， 通过异步插入的link标签所指定的css文件也发生了变化，代表入口文件的内容就发生了变化， 所以不管哪个hash都会重新编译， 但是异步chunk不会发生变化

webpack.config.js

    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    const HTMLWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = {
      mode: 'development',
      entry: {
        main: './index.js'
      },
      output: {
        filename: 'js/[name].[chunkhash].js',
        chunkFilename: 'js/[name].[contenthash].js',
        publicPath: './'
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [{
              loader: MiniCssExtractPlugin.loader,
              options: {
                outputPath: 'css/'
              }
            },
            "css-loader"
          ]
          }
        ]
      },
      plugins: [
        new HTMLWebpackPlugin({
          template: 'index.html',
          filename: 'index.html',
        }),
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: "css/[name].[contenthash].css",
          chunkFilename: "css/[name].[contenthash].css"
        })
      ],
}
复制代码

index.js

    const asyncChunk = () => import('./asyncChunk')
    console.log(asyncChunk, 1);
    
    document.onclick = () => asyncChunk()
复制代码

asyncChunk.js

    import './common.css'

    export default 'asyncChunk'
复制代码

第一次构建

 

 

 

更改css文件，第二次构建

 

 

从上看出，css发生变化后，入口文件与css一起发生了变化，但是引入css的asyncChunk并没有重新编译，此时证明了contenthash缓存成功

 

总结

contenthash对于缓存更具有意义

作者：IAmFineThanks
链接：https://juejin.im/post/5def77e56fb9a0162e5de308
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。