必须抽离CSS以避免白屏和FOUC；生产环境用mini-css-extract-plugin并配置contentHash、压缩及合理拆分，开发时保留style-loader。
不抽离CSS会导致白屏和FOUC
Webpack默认把CSS打包进JS，页面加载时必须先下载、解析、执行JS，再由JS动态插入
mini-css-extract-plugin 是生产环境唯一合理选择
开发时用 style-loader 是为了热更新快；但生产环境必须换掉它，改用 MiniCssExtractPlugin.loader。否则CSS仍会塞进JS bundle，失去独立缓存、压缩、并行加载等所有优化前提。
-
MiniCssExtractPlugin必须在plugins数组中声明，且配置filename含[contentHash]（如css/main.[contentHash:8].css），否则缓存失效 - 不能和
style-loader混用；若误留在 production 配置里，Webpack 会静默忽略MiniCssExtractPlugin.loader，退化回 JS 内联模式 - 它只在
mode: "production"下生效；开发时保留style-loader即可，无需额外判断环境
多个CSS文件不是越多越好
每个 <link rel="stylesheet"> 都会阻塞渲染，HTTP/2 并不能完全消除串行调度、连接初始化等开销。移动端弱网下，每多一个CSS文件，首屏时间可能再加300–600ms。
- 只在三类场景拆分：打印样式（
print.css）、主题切换（dark-theme.css）、第三方库（如antd/dist/reset.css） - 基础重置（reset/normalize）、工具类（utils）、布局（layout）必须合并为单个关键CSS，并内联到HTML
中 - 非关键CSS应通过
media="print"+ onload 切换media="all"的方式异步加载，绕过渲染阻塞
抽离后必须配CSS压缩和哈希命名
只抽离不压缩，CSS体积依然大；不带 contentHash，哪怕改一行样式也会让整个CSS文件缓存失效。
立即学习“前端免费学习笔记（深入）”；
- 压缩插件推荐
css-minimizer-webpack-plugin（optimize-css-assets-webpack-plugin已废弃） -
filename中的[contentHash]必须是8位以上，太短容易碰撞；避免用[hash]或[chunkhash]，它们与JS chunk绑定，CSS内容不变时也可能变化 - 若用了 PostCSS（如
autoprefixer），确保它在css-loader之后、MiniCssExtractPlugin.loader之前执行
MiniCssExtractPlugin.loader 在配置里写错顺序，或 contentHash 位数不够，都会让整套抽离失效，却不会报错。 
