issues
search
Samgao0312
/
Blog
MIT License
1
stars
1
forks
source link
【积点成势】重学Webpack (7) —— 缓存
#154
Open
Samgao0312
opened
2 years ago
Samgao0312
commented
2 years ago
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。
webpack 如何实现持久化缓存
webpack 离线缓存静态资源如何实现
<% HtmlWebpackPlugin.options.loading.html %>
,在 html-webpack-plugin 中即可通过配置html属性,将script注入进去。