webpack学习笔记-webpack优化代码运行性能-runtimeChunk

379 阅读1分钟

runtimeChunk

让我们更好的使用缓存

我们a, b有两个js文件, 其中在a.js中引用了b.js,当我们修改了b.js中的代码后,重新打包编译,会发现a,b两个的contenthash都会改变,这与我们预期的不一样,我们只希望修改b.js,只有b.js做出改变,a.js不发生改变。 这个时候我们就要用到 runtimeChunk

webpack.config.js

module.exports={
  ...
  optimization: {
    ...
    runtimeChunk: {
      name: (name) => `runtime~${entrypoint.name}`
    }
  }
}

在重新打包时,会生成runtime~开头的chunk,如下图所示,当我们修改division.js中的内容,只有两个红框里面的文件名会发生改变。

image.png

关于hash, chunkhash, contenthash。请看这里