CSS懒加载：动态路由实战教程

CSS按需加载并非简单调用`import('./style.css')`就能生效，其背后涉及构建工具（如Vite、Webpack）的深度介入与运行时机制：Vite依赖`cssCodeSplit`和无外部引用前提实现开箱即用的懒加载，Webpack则必须配合`MiniCssExtractPlugin`与魔法注释才能正确抽离并注入CSS；若脱离构建环境，手动创建``标签虽更底层可控，却需自行处理去重、缓存、CORS及错误回退等细节——掌握这些差异与陷阱，才是真正实现高效、可维护样式懒加载的关键。

动态 import() 加载 CSS 文件时为什么没效果

浏览器不支持直接 import('./style.css')，这行代码在大多数构建工具里会报错或静默失败。因为原生 ES 模块只认 JS，CSS 是资源，得靠构建工具或运行时注入。

• Webpack/Vite/Rollup 都把 import('./xxx.css') 当作模块依赖处理，但最终生成的代码不会自动插入 或