动态导入和代码分割通过按需加载降低首屏体积。利用import()语法可实现模块异步加载，结合React的lazy与Suspense进行路由级分割，或将大型第三方库延迟加载，Webpack自动拆分chunk并支持自定义命名，提升应用性能。
在现代前端开发中，随着应用体积不断增大，一次性加载所有JavaScript代码会显著影响首屏加载速度。为优化性能，代码分割（Code Spliting） 和 动态导入（Dynamic Import） 成为关键手段。通过将代码拆分为按需加载的块，实现懒加载，可有效减少初始加载时间，提升用户体验。
动态导入：实现按需加载的核心语法
传统 import 语句是静态的，必须在模块顶层声明，无法在运行时控制加载时机。而动态导入使用 import() 函数语法，返回一个 Promise，允许在条件判断、函数调用等场景中异步加载模块。
示例：
button.addEventListener('click', () => {
import('./module-heavy-feature.js')
.then(module => {
module.init();
})
.catch(err => {
console.error('加载失败:', err);
});
});
点击按钮时才加载重型功能模块，避免其包含的代码打包进主包。
立即学习“Java免费学习笔记（深入）”；
路由级代码分割：提升单页应用体验
在 React、Vue 等 SPA 框架中，按路由拆分是最常见的策略。每个页面组件单独打包，在用户跳转时动态加载对应资源。
以 React + React Router 为例：
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
<p>function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
);
}</p>配合 Suspense 可设置加载状态：
<Suspense fallback="加载中..."> <App /> </Suspense>
用户访问对应路由时，才会请求该页面的 JavaScript 文件。
懒加载第三方库：避免主包臃肿
某些功能依赖大型库（如图表库、PDF 渲染器），但并非所有用户都会使用。这类库适合延迟加载。
示例：仅在用户打开报表时加载 Chart.js
async function showChart() {
const { default: Chart } = await import('chart.js');
new Chart(ctx, config);
}
这样 chart.js 不会出现在主 bundle 中，只有触发行为时才下载。
Webpack 与构建工具的支持
动态导入依赖构建工具的代码分割能力。Webpack 在检测到 import() 语法时，自动将目标模块拆分为独立 chunk。配置上可通过 webpackChunkName 注释命名输出文件：
import( /* webpackChunkName: "chart-module" */ './charts/BarChart' )
最终生成名为 chart-module.chunk.js 的文件，便于调试和缓存管理。
基本上就这些。合理使用动态导入，结合路由和功能边界进行代码分割，能显著降低首屏加载量，让应用更轻快。关键是识别哪些代码“不是立刻需要”的，把它们推迟到真正需要时再加载。
