前端常见问题以及处理方式 - - - （一）浏览器缓存以及解决方法

本文链接：https://blog.youkuaiyun.com/weixin_43523043/article/details/126031369

提示：前端查漏补缺，仅代表个人观点，不接受任何批评

文章目录

一、浏览器缓存是什么
二、解决方案
总结

一、浏览器缓存是什么

浏览器缓存（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`
        }
    }
}