Webpack 5+CSS按路由拆分的实质是构建工具将路由对应JS模块与CSS通过静态import绑定，生成一一对应的异步chunk；需在路由组件内import CSS、用dynamic import加载组件、配置mini-css-extract-plugin，避免全局引入或runtime插入。
Webpack 5 + CSS 按路由拆分的实质是啥
不是靠 CSS 本身“拆”，而是靠构建工具把不同路由对应的 import('./PageA.css') 或组件内 import 的样式，和对应 JS chunk 绑定，让 Webpack 把它们打进同一个异步 chunk。浏览器加载该路由 JS 时，顺带把 CSS 一起拉下来，不提前、不冗余。
关键点就一个：CSS 必须和路由对应的 JS 模块形成静态依赖关系，不能写在全局入口里，也不能靠 runtime 插入。
Vue Router / React Router 中怎么配才生效
- 路由组件内部直接
import './DetailPage.module.css'（推荐 CSS Modules）或 import './DetailPage.css'（普通 CSS）
- 不要写在
main.js 或 App.vue 顶层 import 里
- 使用动态
import() 加载页面组件（Vue Router 的 component: () => import('./DetailPage.vue')，React Router 的 lazy(() => import('./DetailPage'))）
- 确保 Webpack 的
splitChunks 没禁用 CSS 提取（mini-css-extract-plugin 默认启用）
import './DetailPage.module.css'（推荐 CSS Modules）或 import './DetailPage.css'（普通 CSS） main.js 或 App.vue 顶层 import 里 import() 加载页面组件（Vue Router 的 component: () => import('./DetailPage.vue')，React Router 的 lazy(() => import('./DetailPage'))） splitChunks 没禁用 CSS 提取（mini-css-extract-plugin 默认启用） 常见错误现象：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css" —— 这是因为你把 .css 文件当 JS 去 import() 了，实际应 import 组件，让组件内部 import CSS。
为什么 extract-text-webpack-plugin 不行，而 mini-css-extract-plugin 可以
-
extract-text-webpack-plugin 已废弃，不支持 Webpack 5，且它把所有 CSS 合并到一个文件，无法按 chunk 拆分
-
mini-css-extract-plugin 会为每个含 CSS 的 JS chunk 单独生成一个 .css 文件，并在 JS 中插入 link 标签（或通过 JS 加载），从而实现 chunk 级别的一对一映射
- 它的
filename 和 chunkFilename 配置直接影响输出路径，例如设为 [name].css，配合路由组件命名（如 DetailPage.js → DetailPage.css），可读性更强
extract-text-webpack-plugin 已废弃，不支持 Webpack 5，且它把所有 CSS 合并到一个文件，无法按 chunk 拆分 mini-css-extract-plugin 会为每个含 CSS 的 JS chunk 单独生成一个 .css 文件，并在 JS 中插入 link 标签（或通过 JS 加载），从而实现 chunk 级别的一对一映射 filename 和 chunkFilename 配置直接影响输出路径，例如设为 [name].css，配合路由组件命名（如 DetailPage.js → DetailPage.css），可读性更强 性能影响：每个 CSS chunk 都是独立 HTTP 请求，但现代 HTTP/2 下开销极小；若路由过多，可考虑用 splitChunks.cacheGroups 合并公共样式（比如所有页面都用的重置样式）。
立即学习“前端免费学习笔记（深入）”；
开发时热更新失效？那是因为 CSS 没走 HMR 流程
-
mini-css-extract-plugin 在生产模式下提取 CSS，在开发模式下默认退回到 style-loader（内联 style 标签），所以开发时看不到单独的 CSS 文件，但 HMR 是好的
- 如果你强制在 dev 模式也用
mini-css-extract-plugin，HMR 就会断掉 —— 因为它不支持 CSS 替换，只支持整 chunk 替换
- 解决办法：开发用
style-loader，生产用 mini-css-extract-plugin，用 mode 区分即可，别为了“统一”去 hack
mini-css-extract-plugin 在生产模式下提取 CSS，在开发模式下默认退回到 style-loader（内联 style 标签），所以开发时看不到单独的 CSS 文件，但 HMR 是好的 mini-css-extract-plugin，HMR 就会断掉 —— 因为它不支持 CSS 替换，只支持整 chunk 替换 style-loader，生产用 mini-css-extract-plugin，用 mode 区分即可，别为了“统一”去 hack 容易被忽略的地方：CSS 拆分后，如果某页面用了全局变量（比如 :root 里的 --primary-color），但它没被任何路由组件 import，这个变量就不会被打包进去——得确保基础样式至少被一个路由引用，或显式 import 到某个共享 chunk 中。
