webpack的缓存

一、babel缓存

1. 引入问题

• 为什么对Babel进行缓存，因为项目里js代码一般最多，而babel是对js代码进行编译处理成浏览器能识别的语法
• 100个js模块中只有1个变化，另外99个不需要再重新编译

 

2. 解决方案

• 开启Babel 缓存
• 第二次构建时才会读取缓存，速度会更快一些

 

3. 具体配置

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      [
        '@babel/preset-env',
        {
          useBuiltIns: 'usage',
          corejs: { version: 3 },
          targets: {
            chrome: '60',
            firefox: '50'
          }
        }
      ]
    ],
    // 开启babel缓存
    // 第二次构建时，会读取之前的缓存
    cacheDirectory: true
  }
},

 

4. 作用

• 让第二次打包速度更快

 

二、文件资源缓存

1. 引入问题

• 浏览器缓存期间，如果代码出现严重错误，会出现重大生产问题，所以我们可以在文件名上做文章，比如加上哈希值

 

2. 解决方案

• 文件名加上哈希值 [ hash: 长度 ]，每次webpack构建时会生成的唯一值

问题：js和css共用一个hash，如果只有js改变并重新打包，css缓存也会失效

 

• webpack引入了chunkhash，根据chunk生成hash值。如果打包来源于同一个chunk那么hash值一样

问题：如果css引入到js中，他们还是一个chunk，所以还是有上面的问题

 

• webpack还引入了contenthash，根据文件内容生成hash值

 

3. 作用

• 让代码上线运行缓存更好使用

 

三、webpack5的contenthash