前端 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]";},},},},
});