vite：配置打包后js的文件名，解决更新后浏览器缓存问题(了解浏览器的强缓存与协商缓存)

❆VE❆

于 2024-06-24 11:07:24 发布

阅读量1k

点赞数 9

文章标签：缓存前端

本文链接：https://blog.csdn.net/qq_45796592/article/details/139864156

版权

第一章简单理解浏览器的缓存机制

1.1 什么是缓存

当我们第一次访问网站的时候，我们的电脑会把网站上的图片和数据下载到电脑上，当我们再次访问该网站的时候，网站就会从电脑中直接加载出来，这就是缓存。
缓存的优点：

缓解服务器压力，不用每次都去请求某些数据了。(减载)
提升性能，打开本地资源肯定会比请求服务器来的快。(加速)
减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗,节约宽带。(省钱)

缓存的缺点：

占内存（有些缓存会被存到内存中，这也是为什么我们现在的内存越来越多的原因）

1.2 强缓存

浏览器再次访问某个资源时会判断是否使用本地缓存里已经存在的资源文件，使用本地缓存的话则不会发送请求到服务器，从而达到减轻服务器访问压力的作用，且由于直接从本地缓存读取资源文件，大大提高了加载速度。首次访问时，服务器希望浏览器得到该资源后一段时间内不要再发送请求过来，会在响应头返回响应的信息，从而让浏览器资源缓存到本地。

1.3 协商缓存

当浏览器再次请求资源时，服务器会对比浏览器请求携带的值，如果对比后发现没有变化，则返回304，继续使用缓存的资源；否则返回200以及最新的资源文件给浏览器使用并缓存。

第二章配置输出js文件名

2.1 原因

需要配置打包后的js文件名需要变化是因为小编的一个项目语音转文字的功能bug修改打包上线后一个不能使用，但是当把浏览器缓存清除了之后就能使用了；说明项目上线后由于原来的项目的资源还被缓存在手机的文件夹中，浏览器请求资源发现文件资源的名字什么的都没有发生变化，于是浏览器触发强缓存机制，从本地获取资源，导致新的资源并没有获取到；但是小编又不能要求每一个客户都需要清一下缓存再使用。所以只能修改打包后的资源名，让浏览器没有检测到本地有资源，从而重新下载使用最新的资源并缓存，从而实现用户不需要手动清除缓存也能使用修改后的功能。

2.2 配置代码

在vite.config.js中配置（可以使用时间戳/hash实现） —— 代码如下(output配置项下)：

 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const timeStamp = new Date().getTime() // 添加时间戳

export default ({ mode }) =>
    defineConfig({
        plugins: [vue()],
        base: './', // 基本公共路径
        build: {
            // 设置打包后文件的名称
            outDir: 'wisdom-backend',
            // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
            emptyOutDir: true,
            // 启用/禁用 reportCompressedSize 压缩大小报告
            reportCompressedSize: true,
            // chunks 大小限制
            chunkSizeWarningLimit: 2000,
            minify: 'terser',
            // 删除文件中console、debugger等调试用的多余代码
            terserOptions: {
                compress: {
                    drop_console: true,
                    drop_debugger: true
                }
            },
            // 自定义底层的 Rollup 打包配置
            rollupOptions: {
                 output: {
                      // 将静态文件进行分类存放 并添加时间戳 每次打包文件资源不同
                      chunkFileNames: `static/js/[name]-[hash].${timeStamp}.js`,
                      entryFileNames: `static/js/[name]-[hash].${timeStamp}.js`,
                      assetFileNames: `static/[ext]/[name]-[hash].${timeStamp}.[ext]`,
                      // 静态资源分拆打包
                      manualChunks(id) {
                          if (id.includes('node_modules')) {
                              return id.toString().split('node_modules/')[1].split('/')[0].toString()
                          }
                      }
                 }
            }
    })
 
});