Webpack 如何实现持久化缓存？

Question

Webpack 如何实现持久化缓存？

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

webpack 的存储实际上分为 5.x 和 4.x 版本，因为这是现目前用得最多的版本：

• webpack4 的缓存方式

  • cache-loader：通过对比 bundle 的 etag ，即这个 bundle 依赖的其他模块的 hash 值，以判断缓存是否失效，建议在开销较大的 loader 前加，比如 babel-loader、vue-loader 等
  • hard-source-webpack-plugin：与 cache-loader 不同的是，它既可缓存【Loader 运行结果】，还可保存 【Webpack 构建过程中许多中间数据】，包括：模块、模块关系、模块 Resolve 结果、Chunks、Assets 等，效果几乎与 Webpack5 自带的 Cache 对齐
  • DllPlugin & DllReferencePlugin：对不经常改变版本的第三方依赖（如：react、vue、lodash），单独生成动态链接库（bundle），提高构建速度
  • 自带缓存的 loader & plugin：babel-loader、eslint-loader、eslint-webpack-plugin、stylelint-webpack-plugin

• webpack5 的缓存方式

  • cache.type: "filesystem" （文件系统缓存）：webpack 会在内部以分层方式启用【文件系统缓存】和【内存缓存】，写入缓存时，将同时写入【内存缓存】和【文件系统缓存】，读取缓存时，先查看【内存缓存】，若未找到，则降级到【文件系统缓存】

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。