提示:前端查漏补缺,仅代表个人观点,不接受任何批评
文章目录
一、浏览器缓存是什么
浏览器缓存(Browser Caching)是为了节约
网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览
。
浏览器缓存主要有两类:缓存协商:Last-modified ,Etag 和彻底缓存:cache-control,Expires。
二、解决方案
1.使用webpack优化打包,解决用户浏览器缓存问题
代码如下(示例):
// 修改 webpack.prod.conf.js 文件
const date = new Date();
const version = moment(date).format('YYYYMMDDHHmmssSSS'); // 打包时候的版本号
const timestamp = date.getTime(); // 时间戳
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath(`js/[name].[chunkhash:8].${ version }.js?_t=${ timestamp }`),
chunkFilename: utils.assetsPath(`js/[name].[chunkhash:8].${ version }.js?_t=${ timestamp }`)
}
2.在 html 页面前面加 meta 标签,让所有的css/js资源重新加载
代码如下(示例):
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
3.后端服务器 nginx 配置,让 index.html 不缓存
vue默认配置,打包后css和js的名字后面都加了哈希值,不会有缓存问题。
但是index.html在服务器端可能是有缓存的,需要在服务器配置不让缓存index.html
代码如下(示例):
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
4.使用vue脚手架搭建的项目,编辑vue.config.js
const version = new Date().getTime();
module.exports = {
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: {
// 修改打包后css文件名 // css打包文件,添加时间戳
filename: `css/[name].${version}.css`,
chunkFilename: `css/[name].${version}.css`
}
},
configureWebpack: {
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
}
}
}
总结
以上就是今天要讲的内容,本文简单介绍了浏览器缓存以及解决方法
评论 (0)