（十六）开启持久化存储缓存
在webpack5之前做缓存是使用babel-loader缓存解决js的解析结果,cache-loader缓存css等资源的解析结果,还有模块缓存插件hard-source-webpack-plugin,配置好缓存后第二次打包,通过对文件做哈希对比来验证文件前后是否一致,如果一致则采用上一次的缓存,可以极大地节省时间。
webpack5 较于 webpack4,新增了持久化缓存、改进缓存算法等优化,通过配置 webpack 持久化缓存,来缓存生成的 webpack 模块和 chunk,改善下一次打包的构建速度,可提速 90% 左右,配置也简单，
- 修改webpack.base.js
// webpack.base.js
// ...
module.exports = {
// ...
cache: {
type: 'filesystem', // 使用文件缓存
},
}通过开启webpack5持久化存储缓存,再次打包的时间提升了90%。
| 模式 | 第一次耗时 | 第二次耗时 |
|---|---|---|
| 启动开发模式 | 67158 ms | 9059 ms |
| 启动打包模式 | 42632 ms | 47146 ms |
- 未开启持久化缓存-开发模式
- 开启持久化缓存-开发模式
- 未开启持久化缓存-生产模式
- 开启持久化缓存-生产模式
缓存的存储位置在node_modules/.cache/webpack,里面又区分了development和production缓存
