CSS懒加载：动态路由实战教程
2026-05-07 22:15:53
0浏览
收藏
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')当作模块依赖处理，但最终生成的代码不会自动插入或
