【积点成势】重学Webpack (7) —— 缓存

[Samgao0312]

webpack 如何实现持久化缓存

• 服务端设置http缓存头（cache-control）
• 打包依赖和运行时到不同的chunk，即作为splitChunk，因为他们几乎是不变的。
• 延迟加载： 使用 import()方式， 可以动态加载的文件分到独立的chunk，以得到自己的chunkhash。
• 保持hash值的稳定： 编译过程和文件内通的更改尽量不影响其他文件hash的计算，对于低版本 webpack 生成的增量数字 id 不稳定问题，可用 hashedModuleIdsPlugin 基于文件路径生成解决。

webpack 离线缓存静态资源如何实现

• 在配置webpack时，我们可以使用 html-webpack-plugin 来注入到和 html 一段脚本来实现将第三方或者共用资源进行 静态化存储在html中注入一段标识，例如 <% HtmlWebpackPlugin.options.loading.html %>，在 html-webpack-plugin 中即可通过配置html属性，将script注入进去。
• 利用 webpack-manifest-plugin 并通过配置 webpack-manifest-plugin ，生成 manifestjson 文件，用来对比 JS 资源的差异，做到是否替换，当然，也要写缓存script。
• 在我们做Cl以及CD的时候，也可以通过编辑文件流来实现静态化脚本的注入，来降低服务器的压力，提高性能。
• 可以通过自定义 plugin 或者 html-webpack-plugin 等周期函数，动态注入前端静态化存储script。