JavaScript代码分割_动态导入与预加载

动态导入与预加载可提升前端性能。通过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(() => {});
};
<p>// 用户进入相关页面前触发
window.addEventListener('mousemove', preloadModule, { once: true });</p>

这种“预测性加载”在用户真正请求功能前完成下载，点击后几乎立即执行。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

407

查看详情

结合 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') }
];

对非关键功能如模态框、图表、富文本编辑器等，采用点击后加载或悬停预加载策略。

注意避免过度预加载，以免浪费带宽。优先预加载高概率访问的模块。

基本上就这些。合理使用动态导入与预加载，能在不影响功能的前提下，让应用启动更快，响应更及时。

以上就是JavaScript代码分割_动态导入与预加载的详细内容，更多请关注php中文网其它相关文章！