webpack4 打包优化 webpack4提升180%编译速度

1 参考文章

2: webpack4中的 optimization.runtimeChunk的作用是什么？

首先看参考文章：
优化持久化缓存的, runtime 指的是 webpack 的运行环境(具体作用就是模块解析, 加载) 和模块信息清单,
模块信息清单在每次有模块变更(hash 变更)时都会变更, 所以我们想把这部分代码单独打包出来,
配合后端缓存策略, 这样就不会因为某个模块的变更导致包含模块信息的模块(通常会被包含在最后一个 bundle 中)缓存失效.
optimization.runtimeChunk 就是告诉 webpack 是否要把这部分单独打包出来.

假设一个使用动态导入的情况(使用import())，在app.js动态导入component.js

const app = () =>import('./component').then();

build之后，产生3个包。

0.01e47fe5.js
main.xxx.js
runtime.xxx.js

其中runtime，用于管理被分出来的包。下面就是一个runtimeChunk的截图，可以看到chunkId这些东西。

...

function jsonpScriptSrc(chunkId) {
/******/ return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "." + {"0":"01e47fe5"}[chunkId] + ".bundle.js"
/******/ }

...

如果采用这种分包策略

当更改app的时候runtime与（被分出的动态加载的代码）0.01e47fe5.js的名称(hash)不会改变，main的名称(hash)会改变。
当更改component.js，main的名称(hash)不会改变，runtime与 (动态加载的代码) 0.01e47fe5.js的名称(hash)会改变。

总结一下：

runtime.js文件相当于动态文件的索引文件，相当于一个文件夹中的index索引文件，告诉main.js要引用的文件的名字

这样app.js 变化的时候由于不影响 componment.js 所以生成的0.01.js 和runtime.js 不会发生变化；

当 componment.js 发生变化的时候，生成的0.01.js要发生变化，同时索引文件 runntime.js 也会发生变化。但是main.js引用的是runntime.js 则不会发生变化

webpack4 打包优化 webpack4提升180%编译速度

猜你喜欢