vite打包解决前端发版后浏览器缓存问题

阅读本书更多章节>>>>

如何避免浏览器缓存问题，保证每次发布新版本时浏览器都能加载最新的代码

Vite 构建工具的配置文件 vite.config.js：

import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import { resolve } from 'path';import pkg from './package.json' assert { type: 'json' };// 时间戳const timestamp = new Date().getTime();export default defineConfig({  plugins: [vue()],  resolve: {    alias: {      '@': resolve(__dirname, 'src') // 将@配置为src目录的绝对路径    }  },  server: {    host: '0.0.0.0',  },  build: {    rollupOptions: {      output: {        manualChunks: {          vendor: Object.keys(pkg.dependencies),        },        chunkFileNames: ({ name }) => {          if (name === 'vendor') {            return `assets/js/[name]-[hash].js`; // 第三方库不添加时间戳          } else {            return `assets/js/[name]-[hash]-${timestamp}.js`; // 自定义文件名，使用时间戳保证唯一性          }        },        entryFileNames: ({ name }) => {          if (name === 'vendor') {            return `assets/js/[name]-[hash].js`; // 第三方库不添加时间戳          } else {            return `assets/js/[name]-[hash]-${timestamp}.js`; // 自定义文件名，使用时间戳保证唯一性          }        },        assetFileNames: `assets/[ext]/[name]-[hash].[ext]` // 资源文件添加时间戳      },    }  }});

通过设置 chunkFileNames 和 entryFileNames 函数，根据文件名是否为第三方库来动态设置输出文件的文件名。对于第三方库，不添加时间戳，确保其文件名稳定；而对于自定义文件，则使用时间戳保证每次构建生成的文件名都具有唯一性。这样的配置能够有效避免浏览器缓存问题，确保浏览器每次都能加载最新的代码，同时又不影响第三方库的缓存效果。

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-08/155428.html，文章来源：网络cs，作者：晨起，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！