es module 本身不支持 css 按需加载，但通过 webpack 的 css-loader 和 style-loader 配合 import() 动态导入，可实现 js 与关联 css 的异步加载；需避免 minicssextractplugin 破坏按需逻辑，并确保 css 仅随动态 chunk 加载。
ES Module 本身不直接支持 CSS 模块的按需加载，但通过 Webpack 的模块系统和 loader 链，可以把 CSS 当作“资源模块”参与依赖图构建，再结合 import() 动态导入语法，实现真正意义上的 CSS 按需加载（即：只在需要时加载对应 JS + 关联 CSS）。
CSS 作为 ES Module 资源被识别
Webpack 默认不处理 CSS 文件，必须配置 loader 才能让 import './style.css' 被正确解析。关键在于：
- css-loader：把 CSS 文件转成 JS 模块（导出一个包含样式内容的对象）
-
style-loader：把该 JS 模块插入到页面
中生效 - 两者组合使用时，
import './button.css'就不再是“无效语句”，而是有副作用的真实模块调用
用动态 import() 触发 CSS 按需加载
静态 import 会在构建时被提前打包进主 bundle；而 import() 是 Promise 异步函数，Webpack 会自动把它识别为代码分割点：
- 写法示例：
const { default: Button } = await import('./components/Button.js'); - 只要
Button.js内部写了import './button.css'，Webpack 就会把该 CSS 和 JS 一起打成一个 chunk - 这个 chunk 只有执行到
import()时才被请求、解析、注入样式
确保 CSS 不被提前提取或污染全局
如果项目用了 MiniCssExtractPlugin（常见于生产环境），要注意它默认会把所有 CSS 提取到单独文件中，可能破坏“按需”逻辑：
- 开发环境建议禁用该插件，保留
style-loader，便于验证动态加载效果 - 生产环境若仍需提取 CSS，要配合
splitChunks.chunks: 'async'，确保只提取异步 chunk 中的 CSS - 避免在入口文件（如
index.js）里静态import全局 CSS，否则它会被打包进 main bundle，失去按需意义
实际效果与验证方式
打包后可观察 dist 目录生成多个 xxx.js 和对应的 xxx.css 文件（哈希命名），浏览器 Network 面板中能看到：只有点击按钮、打开弹窗等触发动作后，才发起对这些 chunk 的请求，且 JS 和 CSS 同时加载完成，样式立即生效。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
