阅读 2105

contenthash才是缓存的重要hash - webpack hash contenthash chunkhash你真的懂了吗?

前言:

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对于缓存更具有意义

文章分类
前端
文章标签