优化微信网页缓存问题
缓存严重导致:
1.问题是微信浏览器的内核已经对页面渲染完了,但是vue的app.js还没有加载,导致阻断白屏,
2.几个js的加载顺序不对。
3.由于缓存,第一次进入还访问的是以前清掉的的页面
4.还有服务器放包,老是增量放包,全量放页面就访问不到
解决办法如下几种:
1.就是给vue的入口文件加个强制刷新,index的meta设置不缓存属性
2.在build的webpack.prod.conf.js改变js的顺序
3.在build的webpack.prod.conf.js的output下的filename和chunkfilename加个时间戳
4.让公众号的菜单先跳入一个空白页面,空白页在链接后面增加时间戳再跳入vue的正式首页地址
jump的代码,从jump转入index
第四种引用https://blog.csdn.net/qq_39024950/article/details/106530081
<script>
const str=window.location.href;
const domain=str.replace('jump','index')
const newURL=domain+"?t="+new Date().getTime()
window.location.href=newURL
</script>
在config下面的index.js中做如下修改
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
//增加jump的入口
jump: path.resolve(__dirname, '../dist/jump.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
在webpack.prod.conf.js增加jump出口
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'jump.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),