webpack持久化缓存,优化大作战
优化原理
优化webpack打包速度一直是所有前端开发人员的痛点,为了加快打包编译速度,出现了各种技术进行优化。
其中缓存技术是一种能大幅度提高打包速度的优化手段,使得整体打包时间大大缩短。
webpack babel-loader cache原理
babel-loader在打包的时候可以使用 cache技术,但是babel-loader的cache必须经过一次编译,才会将索引的文件与文件编译结果缓存在内存中。
在后续的编译过程中,如果发现索引的文件已经缓存过了,那么会直接引用已经编译缓存的结果。
缺点:必须要打包一次
HardSourceWebpackPlugin 插件
持久化缓存结果至硬盘上,这个插件的机制是,第一次编译文件的时候,采用 文件的 hashCode 标记 结果。将编译结果与hashCode关联起来。
第二次编译文件的时候,首先加载本地缓存结果(SSD非常快)。然后在进入正常编译环节的时候,插件会将需要编译的文件再次计算hashCode,如果此Code在缓存库中已经存在了,那么将直接跳过编译环节,直接输出编译结果。
这里有几个问题解惑一下。
import引入的文件问题,其实缓存的结果并不是最终打包结果,只是babel-loder编译之后的结果集,在最终的打包(合并编译结果)情况下,如果引入的文件变动了,那么这个输出文件会从缓存中加载已编译的结果,再次重新打包写入dist,因为这个输出文件并没有变动,变动的仅仅是被引入文件。
如何使用?
npm install hard-source-webpack-plugin --save
在webpack.config.js插件字段中加入
plugins: [
new HardSourceWebpackPlugin(),
...
]
web pack 5
HardSourceWebpackPlugin插件带来的效果是显著的,现在这个功能点包含webpack5中。详情可通过https://webpack.js.org/configuration/other-options/#cache 查看。
当设置 cache.type: "filesystem" 时,webpack 会在内部以分层方式启用文件系统缓存和内存缓存。优先级为
内存缓存->文件缓存->即时编译
1111