代码分割与动态导入通过按需加载模块提升应用性能。利用import()语法返回Promise实现运行时加载，适用于非首屏内容如弹窗、图表；结合React.lazy与Suspense可实现路由级懒加载，降低首页体积；Webpack支持魔法注释控制chunk命名、预加载（prefetch）与预请求（preload），优化资源加载策略。合理拆分可显著提升用户体验，但应避免过度分割导致请求过多。
代码分割和动态导入是提升JavaScript应用性能的重要手段，尤其在构建大型单页应用时效果显著。通过将代码拆分成按需加载的块，可以减少初始加载时间，优化用户体验。核心实现方式是利用ES模块的动态import()语法，配合现代打包工具如Webpack、Vite等完成懒加载。
动态导入：import() 函数
与静态import不同，import()返回一个Promise，可以在运行时动态加载模块。
例如：
button.addEventListener('click', () => {
import('./module.js')
.then(module => {
module.default();
})
.catch(err => {
console.error("模块加载失败", err);
});
});
立即学习“Java免费学习笔记（深入）”；
点击按钮时才加载module.js，实现功能级懒加载。适合弹窗组件、图表库等非首屏内容。
路由级代码分割（React 示例）
在React中结合React.lazy和Suspense可轻松实现路由懒加载。
示例：
const Home = React.lazy(() => import('./routes/Home'));
const About = React.lazy(() => import('./routes/About'));
function App() {
return (
);
}
每个路由对应一个独立JS文件，访问时才加载，有效降低首页体积。
Webpack 中的魔法注释
使用import()时可通过“魔法注释”控制打包行为。
常见用法：
- /* webpackChunkName: "chart" */：为生成的chunk命名，便于调试
- /* webpackPrefetch: true */：空闲时预加载
- /* webpackPreload: true */：优先级较高，与主流程并行加载
示例：
import(/* webpackChunkName: "utils" */ './helpers.js')
打包后生成名为utils.js的文件，提升可维护性。
基本上就这些。合理使用动态导入，结合路由或交互触发时机，能大幅优化加载性能。注意避免过度拆分，防止HTTP请求过多反而影响体验。
