前端 JS 经典：Vite 分包配置

前言：在 Vite 项目中使用 npm run build 直接打包，打包后所有的静态文件都在 assets 文件中，js、css、图片等都放在一起看着很不舒服。我们可以通过配置 vite.config.js 来进行分包处理。打包机制底层是使用的 roolup，可以参考 rollup 官网。

vite.config.js 分包配置如下，备注写明字段用途，其中 [name] 、[hash] 、[ext] 是 rollup 中的展位符。

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

export default defineConfig({
  plugins: [vue()],
  build: {
    // 配置 rollup 选项
    rollupOptions: {
      // 影响打包输出结果
      output: {
        // 入口 js 文件
        entryFileNames: "js/[name]-[hash].js",

        // 影响分包结果
        chunkFileNames: "js/[name]-[hash].js",

        // 除了 js 的其他文件
        assetFileNames(assetInfo) {
          if (assetInfo.name.endsWith(".css")) {
            return "css/[name]-[hash].css";
          }
          const imgExts = [
            ".png",
            ".jpg",
            ".jpeg",
            ".webp",
            ".svg",
            ".gif",
            ".icon",
          ];
          if (imgExts.some((ext) => assetInfo.name.endsWith(ext))) {
            return "imgs/[name]-[hash][ext]";
          }
          return "assets/[name]-[hash].[ext]";
        },
      },
    },
  },
});