在 vite 项目中配置 css 代码分割，核心是修改 rollupoptions 中的 output 字段，利用 manualchunks 函数将样式文件从 js bundle 中剥离并独立输出。具体做法是在 vite.config.js 中定义一个处理函数，当 chunk 名称包含特定后缀（如 -vendor）时，将其标记为 style 类型，这样 vite 就会生成独立的 .css 文件而非内联到 js 中。
如何配置 manualChunks 实现 CSS 分离？
要实现 CSS 代码分割，需要在构建配置的 build.rollupOptions.output.manualChunks 中编写逻辑。Vite 默认将所有资源打包进 JS，通过返回字符串 'style' 可以强制 Rollup 将对应的 chunk 作为样式文件输出。通常建议针对第三方库或大型模块进行拆分，避免主包过大。
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks(id) {
// 如果模块路径中包含 node_modules 且文件名以 -vendor 结尾
if (id.includes('node_modules') && id.endsWith('-vendor.js')) {
return 'style'; // 强制输出为 CSS 文件
}
},
},
},
},
});
上述配置中，manualChunks 接收模块 ID 作为参数。当条件满足时返回 'style'，Rollup 会识别该请求并生成独立的 CSS 文件。若未匹配到任何条件，则保持默认行为，即合并到 JS 中。这种方式允许精确控制哪些模块需要被提取为样式。
立即学习“Java免费学习笔记（深入）”；
如何处理动态导入的组件样式？
对于使用 import() 动态加载的组件，其样式默认也会随 JS chunk 一起加载。若希望这些组件的样式也独立分割，可以在 manualChunks 中针对动态导入的路径进行判断。例如，根据路由路径或组件名称返回特定的 chunk 名，并确保这些 chunk 被标记为 style 类型，从而实现按需加载样式。
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks(id, { getModuleInfo }) {
// 检查是否为动态导入的模块
const moduleInfo = getModuleInfo(id);
if (moduleInfo?.isEntry || id.includes('/components/')) {
// 将组件相关的模块拆分为独立 chunk
return `chunk-${id.split('/').pop()}`;
}
},
},
},
},
});
在上面的示例中，getModuleInfo 用于获取模块元数据，帮助判断模块类型。通过返回自定义的 chunk 名称，可以将不同组件的样式和代码分别打包。需要注意的是，只有当 chunk 被显式标记为 'style' 时，才会生成 CSS 文件；否则仍会内联到 JS 中。因此，需结合业务需求调整判断逻辑，确保关键组件的样式能够正确分离。
配置后生成的文件结构是怎样的？
完成配置并执行构建后，Vite 会在 dist 目录下生成与 JS 文件对应的 CSS 文件。例如，若某个 chunk 被标记为 'style'，则会生成名为 [chunk-name].css 的文件。HTML 文件中的 <link> 标签会自动引用这些 CSS 文件，确保样式按需加载。开发者可通过检查构建产物验证配置是否生效，确认每个预期的 chunk 都有对应的 CSS 输出。
