真正按需加载CSS需构建工具代码分割+运行时控制，非单纯import；Vite用import.meta.glob+await import()实现动态加载，推荐.module.css；Webpack需mini-css-extract-plugin配合动态import且CSS仅被单处引用。
组件 CSS 文件不能靠 import 语句自动按需加载
直接在组件 JS/TS 文件里写 import './Button.css'，打包时（如 Webpack/Vite）默认会把它打进主包或公共 chunk，不是“用到才加载”。真正按需加载 CSS，得靠构建工具的代码分割能力 + 运行时控制，而不是单纯靠 import 位置。
Vite 中用 import.meta.glob 动态引入 CSS 文件
适合需要手动触发加载的场景，比如点击后才显示某组件，且希望连带样式一起懒加载。Vite 支持对 CSS 文件做 glob 导入，但需配合 await import() 才能实现动态加载。
-
import.meta.glob只生成模块路径映射，不执行加载 - 必须用
await import('./Modal.module.css')（注意：.css 不支持 HMR，推荐用 .module.css） - 纯
.css文件动态 import 后，样式会注入，但无卸载机制；.module.css更安全，类名哈希化也避免冲突
const cssMap = import.meta.glob('./components/Chart/*.module.css', { eager: false });
// 使用时
async function loadChart() {
await import('./components/Chart/Chart.vue'); // 组件
await import('./components/Chart/Chart.module.css'); // 样式
}
Webpack 需配合 mini-css-extract-plugin + import()
Webpack 默认把所有 import './xxx.css' 提取到一个 main.css 里。要让某次 import() 带来的 CSS 单独成文件，必须满足两个条件：
- 目标 CSS 文件只能被一个动态
import()引用（不能同时被静态 import 和动态 import 引用） -
mini-css-extract-plugin的chunkFilename配置启用，例如chunkFilename: 'css/[name].[contenthash:8].css' - 组件内不要用
require('./xxx.css')，必须统一用import()（返回 Promise）
function renderReport() {
return import('./Report.vue').then(({ default: Report }) => {
// 此处 Report.vue 内部不应 import './Report.css'
// 而应由外部同步 import CSS，或用 style-loader 临时注入
import('./Report.css');
return Report;
});
}
真正“按需”的关键在组件注册和使用时机
打包工具只负责分包，是否加载取决于你什么时候调用 import()。常见漏点：
立即学习“前端免费学习笔记（深入）”；
-
路由级懒加载（
component: () => import('./Foo.vue')）不会自动带出其内部import './Foo.css'，因为 Webpack 默认把这类 CSS 提到 initial chunk - Vue/React 组件库（如 Element Plus、Ant Design）提供
style: true或babel-plugin-import，本质是把import { Button } from 'ant-design-vue'编译成import Button from 'ant-design-vue/lib/button'+import 'ant-design-vue/lib/button/style/css'，再配合动态 import 实现样式分离 - 如果组件用了 CSS-in-JS（如 styled-components、emotion），样式生成在运行时，天然“按需”，但无法提取为独立 CSS 文件
没配好构建规则时，看着写了 import()，结果 network 面板里还是看到 main.css 体积暴涨——问题往往出在 CSS 文件被多处引用，或者插件配置没开 code-splitting。
