Webpack按路由拆分CSS需手动配置splitChunks.cacheGroups匹配.vue或.css文件路径，确保CSS与JS chunk关联；避免@import全局引入，优先用CSS Modules；Next.js App Router中需将CSS移至components目录或用dynamic延迟加载。
Webpack里怎么按路由拆分CSS文件
Vue或React项目用Webpack打包时，mini-css-extract-plugin默认会把所有CSS抽成一个main.css，哪怕只在/admin页用的样式，也会打进首页加载。这不是懒加载，是硬塞。
关键不是“能不能拆”，而是“拆完会不会漏样式”——因为CSS不像JS有明确的模块依赖链，它靠的是引入顺序和选择器权重。
- 必须配合
splitChunks.chunks: 'all'+splitChunks.cacheGroups手动配CSS组，不能只靠mini-css-extract-plugin自动抽 -
import('./AdminPage.css')这种写法无效：CSS模块不支持动态导入，得靠JS模块触发（比如import('./AdminPage.vue')内部带<style>） - 如果用了
css-loader的modules: true，拆包后类名哈希仍独立生成，不用担心冲突；但全局样式（如reset.css）必须显式放进cacheGroups的priority高项里，否则可能被吞掉
Vue Router异步组件加载时CSS没生效
写component: () => import('./Admin.vue')后，页面打开空白或样式错乱，控制台没报错，但document.styleSheets里缺对应CSS link节点——说明CSS没随组件一起加载。
根本原因是Vue单文件组件里的<style>默认走vue-style-loader（开发时插入<style>标签），而生产环境用mini-css-extract-plugin转成外部.css文件，但Webpack没把它和JS chunk正确关联。
立即学习“前端免费学习笔记（深入）”；
- 确保
vue.config.js中configureWebpack.optimization.splitChunks.cacheGroups包含匹配.vue文件的CSS规则，例如name: 'admin', test: /[\/]src[\/].*admin.*.vue$/ - 避免在
App.vue里@import其他页面的CSS——这会让Webpack认为它是全局依赖，强行打进main.css - 检查Network面板，确认
admin.xxx.css确实被请求了，且HTTP状态码是200；如果返回404，大概率是publicPath配置错了，比如部署子路径时漏了output.publicPath: '/sub/'
React+Next.js里CSS拆分失效的典型表现
Next.js 13+用App Router后，app/admin/page.tsx里的import './admin.css'不会触发单独CSS chunk，而是全打进main.css——因为Next.js默认把app目录下所有CSS当作全局资源处理。
这不是bug，是设计：Next.js认为App Router的CSS应具备服务端渲染一致性，所以禁用按需提取。想绕过，只能换位置或换方式。
- 把CSS移到
app/admin/components/xxx.module.css，用CSS Modules，Next.js会为每个模块生成唯一哈希类名，并自动拆包 - 如果必须用全局样式，在
app/layout.tsx里用dynamic延迟加载CSS文件：const AdminCSS = dynamic(() => import('@/styles/admin.css'), { ssr: false })，但注意ssr: false会导致首屏无样式 - 别在
app/admin/page.tsx里用useEffect去loadCSS——服务端渲染时useEffect不执行，样式会闪动甚至缺失
拆完CSS后FOUT（Flash of Unstyled Text）更严重了
拆包后CSS文件变小了，但用户看到文字先渲染再套样式，比原来等一个大CSS还明显——说明CSS加载时机没控住，或者媒体查询/字体加载拖了后腿。
核心矛盾：拆包降低体积，但增加HTTP请求数；而浏览器对CSS是阻塞解析的，每个<link rel="stylesheet">都会卡DOM构建。
- 用
rel="preload"提前拉关键CSS：<link rel="preload" href="/admin.xxx.css" as="style" onload="this.onload=null;this.rel='stylesheet'">，配合onload回填避免FOUC - 慎用
@import嵌套CSS：它会串行加载，admin.css里@import 'theme.css'会让theme.css晚于admin.css开始下载 - 字体文件（
@font-face）不要放在拆出的页面CSS里，统一收口到main.css或index.html内联，否则字体加载延迟会放大FOUT
真正难的不是拆，是判断哪部分该进主包、哪部分可异步、哪部分其实压根不该存在——比如一个按钮组件的样式，被5个路由共用，却硬拆进每个页面，反而增加总请求数和缓存失效概率。
