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

在Vite项目中，你可以通过修改vite.config.js文件来配置打包后的JS文件名，从而有效地解决更新后浏览器缓存的问题。

以下是一个配置示例，它使用了环境变量来为不同环境生成不同的文件名，以此来确保缓存效果：

import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig(({ mode }) => {
  // 根据模式不同生成不同的hash
  const isProduction = mode === 'production';
  const hash = isProduction ? '.[contenthash:8]' : '';
 
  return {
    build: {
      // 输出配置
      // 通过模板字符串设置JS文件名
      // 生产环境使用内容哈希，开发环境使用时间戳
      chunkFileName: `${isProduction ? 'chunk-[name]' : 'chunk-[name]-[hash]'}${hash}.js`,
      assetsDir: 'assets',
      rollupOptions: {
        output: {
          entryFileNames: `${isProduction ? '[name]' : '[name]-[hash]'}${hash}.js`,
          chunkFileNames: `${isProduction ? '[name]' : '[name]-[hash]'}${hash}.js`,
          assetFileNames: `${isProduction ? '[name]' : '[name]-[hash]'}${hash}[extname]`,
        },
      },
    },
  };
});

在这个配置中：

• chunkFileName 用于配置非入口chunk的文件名。
• entryFileNames 和 chunkFileNames 分别用于配置入口chunk和非入口chunk的文件名。
• assetFileNames 用于配置静态资源文件的文件名。

生产环境中，文件名包含内容哈希，可以确保文件内容变化时，文件名也会改变，从而避免了浏览器缓存问题。开发环境中，文件名包含时间戳，可以确保每次构建都有独一无二的文件名，避免了缓存。