动态导入import()是代码分割核心，需配合Webpack/Vite等工具、React.lazy+Suspense、SplitChunksPlugin及import.meta.preload等实现按需加载与优化。
用 import() 动态导入实现代码分割
现代 JavaScript 代码分割最直接的方式就是用 import()（注意不是 import 声明），它返回一个 Promise，天然支持按需加载。Webpack、Vite、Rollup 都会自动把它识别为分割点，生成独立 chunk。
常见错误是写成静态 import，比如 import { foo } from './utils.js'，这会让模块在初始化时就打包进主 bundle，完全失去按需意义。
- 只在真正需要时调用：
import('./modal.js').then(mod => mod.open()) - 配合
async/await更自然：const mod = await import('./chart.js') - 不能放在顶层作用域或条件外；必须是表达式，且路径尽量静态（避免变量拼接，否则 webpack 无法分析）
React 中用 React.lazy + Suspense 加载组件
React.lazy 本质就是对 import() 的封装，专用于组件。但它必须和 Suspense 配合使用，否则会报错 Expected a lazy component but received。
容易忽略的是错误边界——Suspense 不捕获异步加载失败，得额外套一层 ErrorBoundary 才能处理网络错误或模块解析失败。
立即学习“Java免费学习笔记（深入）”；
- 写法固定：
const Chart = React.lazy(() => import('./Chart')) -
Suspense必须包裹使用位置：> - 服务端渲染（SSR）中
React.lazy不可用，需改用loadable-components或手动import()
Webpack 的 SplitChunksPlugin 自动拆分第三方库
即使不用动态导入，Webpack 也能通过 optimization.splitChunks 把重复引用的模块（尤其是 node_modules）抽成单独文件，比如 vendor.js 或 react~router.js。
默认配置在开发模式下不生效（mode: 'development' 会禁用），容易误以为没起作用。另外，太小的模块（默认 minSize: 20000）不会被拆分，调整前先看实际 chunk 大小。
- 启用方式：确保
mode: 'production'，或手动配置splitChunks.chunks: 'all' - 常用策略：
cacheGroups按包名提取，例如把react、lodash单独拎出来 - 注意
runtimeChunk: 'single'，避免main.js因哈希变化频繁失效
Vite 下的代码分割和预加载控制
Vite 默认基于 import() 做分割，但不像 Webpack 那样提供细粒度的 splitChunks 配置。它的优势在于原生 ESM，加载更快，但缺少运行时合并逻辑。
一个关键细节是：Vite 会自动给动态 import() 添加 /* @vite-ignore */ 注释来绕过预构建检查，但如果你手动加了 /* webpackMode: "eager" */ 这类注释，反而可能干扰 Vite 行为。
- 预加载建议用
import.meta.preload（Vite 特有）：import.meta.preload('./heavy.js') - 想强制合并多个动态导入？目前只能靠命名相同 chunk（如都用
import('./foo.js') /* webpackChunkName: "shared" */），但 Vite 不识别该注释，所以不推荐依赖 - 构建后检查
dist/assets/目录下的 chunk 文件数量和大小，比看控制台更可靠
代码分割不是加几个 import() 就完事——路径是否稳定、错误是否兜底、构建工具是否真生成了新 chunk、浏览器是否真的延迟加载了它，每个环节都可能静默失败。最稳妥的方式是打开 DevTools 的 Network 面板，过滤 JS，点操作再看哪些文件是点击后才请求的。
