Vite CSS代码分割失效？手动chunks配置-php教程-PHP中文网

vite中css重复打包需通过manualchunks归一化公共样式：将全局css收口至src/assets/styles/，仅由主入口导入，并在vite.config.ts中配置manualchunks匹配路径归入shared-styles chunk。

vite css代码分割失效？手动chunks配置

当多个懒加载组件各自引入同一份基础样式（如 reset.css 或 UI 组件局部 CSS），却在构建后发现这些样式被重复打进不同 chunk，导致体积膨胀、样式覆盖错乱或 FOUC，说明 Vite 的默认 CSS 代码分割机制已失效，必须通过 manualChunks 主动干预。

确认 CSS 分割失效的典型表现

打开 dist/assets 目录，观察是否出现多个 .css 文件（如 index-xxx.css、pageA-yyy.css、pageB-zzz.css），且它们都包含相同的类名或变量声明；同时检查浏览器 Network 面板，发现多个 CSS 请求并行加载，顺序不可控，@import 嵌套失效或 :root 变量被多次重写。

这说明 Vite 默认的 【cssCodeSplit: true】 正在把本该复用的公共样式按入口/动态导入路径机械拆分，而非按依赖图合并。

关闭默认 CSS 分割（治标）

在 vite.config.ts 中直接禁用自动 CSS 拆分：

export default defineConfig({
build: {
cssCodeSplit: false
}
})

这会让所有 import './xxx.css'（含预处理器、CSS-in-JS 注入）最终合并为单个 style.css。但注意：它不解决懒加载组件中内联样式或按需引入 UI 库 CSS 的问题，仅约束非动态路径的静态 CSS。

用 manualChunks 归一化公共样式（治本）

真正要根治重复打包，必须让 Rollup 认出哪些 CSS 是跨模块共用的，并强制归入同一 chunk。关键不是“排除 CSS”，而是“识别并聚类”。

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

第一步：把所有全局/公共样式统一收口到 src/assets/styles/ 目录下，例如 base.css、variables.css、tools.css、element-plus-reset.css；
第二步：确保这些文件只被 main.ts 或 App.vue 一次性导入，禁止任何懒加载组件内部 import './assets/styles/*.css'；
第三步：在 vite.config.ts 中配置函数式 manualChunks：

build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('src/assets/styles/') || id.match(/.css($|?)/)) {
return 'shared-styles';
}
}
}
}
}

⚠️ 注意：正则 /\.css($|\?)/ 必须加括号和字面量转义，否则无法匹配 ?v=xxx 类型的带查询参数路径；若漏掉 $|\?，会导致 node_modules/xxx.css 也被误抓进 shared-styles，破坏 vendor 分离逻辑。