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 会在内部以分层方式启用文件系统缓存和内存缓存。优先级为

内存缓存->文件缓存->即时编译

摄影爱好者,全栈工程师,游戏玩家,积木苦手,超穷手办收藏爱好者

发表评论

已有 2 条评论

  1. king king说道:

    HardSourceWebpackPlugin,你好使用此插件的时候,发现一些文件(e.g: .env文件)的改动并不能重新缓存,而是读取的是之前的缓存,请问大佬知道怎么解决嘛

    1. yodfz yodfz说道:

      https://github.com/mzgoddard/hard-source-webpack-plugin/issues/417
      https://github.com/umijs/umi/issues/1071
      https://github.com/mzgoddard/hard-source-webpack-plugin#environmenthash

      参考下上面的链接。

搜索

热门文章

最近回复