解决js缓存的问题

问题描述

大家用vue脚手架搭建前端工程时，常被缓存问题所困扰，具体的表现就是，当程序版本升级时，用户因为缓存访问的还是老的页面，然后很多同学很暴力的直接在index.html中加入了这几行代码：

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

升级时缓存问题倒解决了，但直接导致了用户每次访问你的程序时都要重新请求服务器，所有的静态资源都无法用缓存了，浪费流量，网络压力变大。

需求澄清

我们真正需要解决的问题，不是单纯的要缓存或者不要缓存，而是期望视情况而定：

程序每次升级后，用户都不会因为缓存问题而执行的仍然是老的程序。
若程序没升级，用户对静态资源的请求则能用到缓存。

解决原理

由于vue脚手架每次打包时，都会将打出的静态资源文件名加个哈希后缀，且index.html中引入时也加了对应的哈希后缀，所以每个版本的静态资源都是全新的，不用担心因升级导致的缓存问题。那么只需让index.html不缓存，且让其他静态资源缓存，就能实现要求。
让静态资源有缓存好办，问题在于怎么只让index.html不缓存。这里我们已经不能单单靠前端代码来实现了，需要用到服务器配置。通过服务器配置，来单独设置请求index.html时的header，以达到控制缓存的目的。

具体实现

在vue.config.js中配置（没有就创建vue.config.js文件）

// vue.config.js
if (process.env.UNI_PLATFORM === 'h5') {
    // 由于这种方式的打包，会导致编译生成微信小程序（只验证了微信小程序）无法正常使用，所以必须分开
    let filePath = 'static/js/'
    let Timestamp = new Date().getTime()
    module.exports = {
        // ... webpack 相关配置
        filenameHashing: false,
        configureWebpack: { // webpack 配置 解决js缓存的问题，目前只适配H5端打包
            output: { // 输出重构  打包编译后的 文件目录 文件名称 【模块名称.时间戳】
                filename: `${filePath}[name].js?v=${Timestamp}`,
                chunkFilename: `${filePath}[name].js?v=${Timestamp}`
            },
        }
    }
}else{
    // 其他打包需要的相关配置
    module.exports = {
        // ... webpack 相关配置
        filenameHashing: false
    }
}