解决前端部署强制ctr+F5清理缓存问题

问提描述

最近部署了很多项目,重新部署了入口页面的文件之后,发现并不是立刻生效的,网页的请求还是请求了缓存文件,导致新的页面文件无法生效,导致入口页面报错,从而导致整个系统无法进入。

这个时候，作为开发，第一时间就建议用户去ctrl+F5去强制清除缓存，但是客户太多，耐不住每个人都投诉一次，只好着手去处理这个问题，为了以后出现这种情况能快速处理，在此记录下来。

第一个方案

首先想到的就是把缓存去掉，所以就在.html文件中的文件头加上禁用缓存的设置

    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>

缺点：每次请求页面都会将文件资源全部重新请求，会浪费服务器的资源

第二个方案

nginx配置，使用正则配置文件后缀名字，将.html的文件增加一个响应头配置

     location / {
        alias  html/main; # 网站的静态资源目录，css，js，image文件等
        index  index.html index.htm; # 网站首页
     ## html不缓存 
      if ($request_filename ~* .*\.(htm|html)$) 
        {
            add_header Cache-Control "no-store";
	}
    }

缺点：只有htm，html的资源文件不缓存，其他资源文件如.js,.css文件还是会缓存，下次更新文件资源还是会优先请求缓存文件

第三个方案

webpack的打包配置，将js，css打包命名规则修改为带有时间戳的名字，这样每次打包都会是一个全新的名字，网页访问资源就会去请求新的资源文件。

const timeStamp = new Date().getTime();
module.exports = {
  configureWebpack: {
    // 重点
    // 输出重构 打包编译后的js文件名称,添加时间戳.
    output: {
      filename: `js/[name].${timeStamp}.js`,
      chunkFilename: `js/chunk.[id].${timeStamp}.js`
    }
  },
  css: {
    //重点.
    extract: {
      // 打包后css文件名称添加时间戳
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/chunk.[id].${timeStamp}.css`
    }
  }
 }

vite的配置

  // 打包配置
  build: {
    target: 'modules',   //浏览器兼容性  "esnext"|"modules"
    outDir: 'dist', //指定输出路径
    assetsDir: 'assets', // 指定生成静态资源的存放路径
    minify: 'terser', // 混淆器，terser构建后文件体积更小\
    terserOptions: {
      compress: { // 打包时清除 console 和 debug 相关代码
        drop_console: true,
        drop_debugger: true,
      },
    },
    //资源文件
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].${timeStamp}.js`,
        chunkFileNames: `assets/[name].${timeStamp}.js`,
        assetFileNames: `assets/[name].${timeStamp}.[ext]`
      }
    }
  },

优点：部署的时候，网页会直接请求新的js，css资源文件

总结

由于是在服务器上面部署的,而服务器的配置比较差,所以为了减少资源的使用,就结合第二种和第三种方案来解决缓存问题。这样部署的时候，就可以不强制刷新缓存就可以直接访问最新的资源了。而不部署的时候，可以访问缓存的js,css资源文件。