tips:此方案必须具备webpack配置能力
浏览器有缓存?
清除缓存就好了,这是大多数前端人员回复的解决方案.
那钉钉H5微应用、微信H5微应用有缓存?
通过钉钉APP强制清缓存,没错,可以达到目的.要是遇到不会清缓存的用户,而且其中偏偏就有你的boss,抓瞎,大脑emo中;考验语言组织能力的时候到了,忽悠得好升职加薪,忽悠不好关机领钱.
脑中一颤,这个问题不解决,凌晨4点的太阳见定了,头发也要见顶了.
灵机一动,有缓存,那就让他缓存,去适应他的缓存就好了,莫急,方案已在来的路上了.
此案例为spa webpack打包应用,其他技术栈可用该思想进行尝试,此方案不是终极解决方案,只能算我尝试后的最优解决方案,只能降低触发缓存的概率,并不能完全根除.
------清除钉钉h5微应用、微信h5微应用解决方案 开始------
只要被缓存的文件没有更换,或者更换的文件并没有被缓存,那微应用打开是不是就不会触发缓存问题;
道理是这么个道理,咱说干就干,已经晚上10点了,一刻也不能耽误;
通过扒拉webpack4文档,它有3种打包方案hash、chunkHash、contentHash,contentHash打包方式恰巧与咱们的灵感重合(低于4版本可用chunkHash);心中一阵窃喜,我已经开始飘了,感觉10:30能回家;webpack出包设置方式如下配置:
output: {
chunkFilename: `js/[id].[${process.env.NODE_ENV === 'production' ? 'contentHash' : 'hash'}].js`, // development不支持contentHash、chunkHash
filename: `js/[name].[${process.env.NODE_ENV === 'production' ? 'contentHash' : 'hash'}].js`, // development不支持contentHash、chunkHash
publicPath: '/', // 解决多路由错乱
},
怎么解决别一下子把所有文件全部缓存呢?
再去扒拉webpack4文档,他有异步加载以及分包策略,这样它就不能全部缓存我的文件了,我突然间又行了,webpack分包配置如下:
optimization: {
// 将多入口的webpack运行时文件打包成一个 runtime文件
runtimeChunk: 'single',
moduleIds: 'hashed',
splitChunks: {
chunks: 'all',
// 拆分代码规则（符合即单独拆分到一个chunk中）
maxInitialRequests: 4, // 在初始化加载时，请求数量大于4
automaticNameDelimiter: '-',
name: true, // 代码块的名字，设置为true则表示根据模块和缓存组秘钥自动生成, 实现固化 chunkId，保持缓存的能力
/* 缓存组，用于继续细分代码。
缓存组默认将node_modules中的模块拆分带一个叫做vendors的代码块, 将最少重复引用两次的模块放入default中。
或者自定义将符合规则的模块单独拆分进一个chunk中。*/
cacheGroups: {
default: false, // 禁用默认规则
vendors: false, // 禁用默认规则
vendor: {
name: 'vendor', // 使用 vendor 入口作为公共部分
chunks: 'initial',
test: /[\\/]node_modules[\\/]/,
enforce: true,
priority: -10,
},
polyfill: {
chunks: 'initial',
test: 'polyfill',
name: 'polyfill',
},
// 对异步组件进行抽取
'async-vendor': {
name: 'async-vendor',
chunks: 'async',
test: (module) => {
// 缓存组的规则，表示符合条件的的放入当前缓存组
if (/[\\/]node_modules[\\/](echarts|zrender)/.test(module.context)) {
return false;
}
return /[\\/]node_modules[\\/]/.test(module.context);
},
},
'async-biz': {
name: 'async-biz',
chunks: 'async',
minChunks: 2, // 被引用次数大于2时进行拆分
},
// css文件单独打包进一个文件中
styles: {
name: 'styles',
test: /\.(less|css)$/,
chunks: 'async',
enforce: true,
},
},
},
},
继续肝,更改完webpack4配置反复的打包测试、对打包文件进行对比,发到钉钉,手指微微颤动的点击了一下界面,竟然没有触发缓存,连续试了多次,居然都没有触发缓存;
我看了看天花板,看了看表,又看了看天花板,又看了看表,瞬间泪如泉涌,表显时间10.31,那一分钟是对我骄傲的惩罚,肝完收工,明天继续肝.
------清除钉钉h5微应用、微信h5微应用解决方案 结束------
作者: 半米飞行
来源: [钉钉H5微应用、微信H5微应用如何去掉缓存](钉钉H5微应用、微信H5微应用如何去掉缓存 - 掘金 (juejin.cn))
