动态导入与预加载可提升前端性能。通过import()按需加载模块，减少首屏体积；结合webpackChunkName、webpackPrefetch等魔法注释命名并预取chunk；路由级组件和非关键功能（如图表）采用动态加载，辅以空闲时预加载高概率模块，优化资源加载时机，加快响应速度。
在现代前端开发中，JavaScript 的代码分割和动态导入能显著提升页面加载性能。尤其当应用体积较大时，通过按需加载模块，可以减少首屏加载时间，改善用户体验。结合动态导入与预加载策略，能进一步优化资源加载时机。
动态导入：按需加载模块
动态导入使用 import() 语法，返回一个 Promise，允许你在运行时动态加载模块。
例如，某个功能仅在用户点击按钮后才需要：
document.getElementById('load-feature-btn').addEventListener('click', async () => {
const module = await import('./heavyFeature.js');
module.init();
});
这样，heavyFeature.js 不会包含在主包中，只有在触发事件后才会从单独的 chunk 中加载。
立即学习“Java免费学习笔记（深入）”；
Webpack、Vite 等构建工具会自动将 import() 的模块拆分为独立文件，实现代码分割。
预加载关键模块：提升响应速度
虽然动态导入延迟了加载，但某些模块可能很快就会用到。这时可使用预加载，在空闲时提前下载模块。
可通过 link 标签或脚本控制预加载：
// 页面加载后预加载，但不执行
const preloadModule = () => {
import('./criticalFeature.js').catch(() => {});
};
// 用户进入相关页面前触发
window.addEventListener('mousemove', preloadModule, { once: true });
这种“预测性加载”在用户真正请求功能前完成下载，点击后几乎立即执行。
结合 Webpack 魔法注释优化分割
在使用 Webpack 时，可通过魔法注释控制 chunk 的生成和加载行为。
常见用法：
- /* webpackChunkName: "feature-name" */：为 chunk 命名，便于调试
- /* webpackPrefetch: true */：空闲时预加载
- /* webpackPreload: true */：与主资源并行加载（谨慎使用）
import( /* webpackChunkName: "chart" */ /* webpackPrefetch: true */ './components/ChartComponent' )
上述配置会生成名为 chart.js 的文件，并在浏览器空闲时自动预取。
实际场景建议
对于路由级组件，推荐在路由配置中使用动态导入：
const routes = [
{ path: '/dashboard', component: () => import('./views/Dashboard') },
{ path: '/settings', component: () => import('./views/Settings') }
];
对非关键功能如模态框、图表、富文本编辑器等，采用点击后加载或悬停预加载策略。
注意避免过度预加载，以免浪费带宽。优先预加载高概率访问的模块。
基本上就这些。合理使用动态导入与预加载，能在不影响功能的前提下，让应用启动更快，响应更及时。
