动态导入模块_javascript代码分割-js教程-PHP中文网

动态导入模块_javascript代码分割

betcha

发布： 2025-11-26 18:36:10

原创

432人浏览过

动态导入通过import()实现按需加载，提升首屏速度与资源利用率，结合构建工具可拆分代码，适用于路由和功能模块分割，优化大型应用性能。

动态导入模块_javascript代码分割

在现代前端开发中，动态导入（Dynamic Imports）是实现代码分割（Code Splitting）的重要手段。它允许你在运行时按需加载模块，而不是在初始加载时就引入所有代码。这对于提升页面加载速度、优化资源利用非常有效。

什么是动态导入

动态导入是 ES2020 引入的特性，通过 import() 函数语法实现。它返回一个 Promise，该 Promise 解析为模块对象。这与静态的 import 语句不同，静态导入在文件加载时就确定依赖关系。

示例：

<pre class="brush:php;toolbar:false;">button.addEventListener('click', () => {
  import('./module.js')
    .then(module => {
      module.default();
    })
    .catch(err => {
      console.error('模块加载失败', err);
    });
});

登录后复制

上面这段代码只有在用户点击按钮时才会去加载 module.js，实现了真正的“按需加载”。

如何实现代码分割

代码分割的目标是将打包后的 JavaScript 文件拆分成多个小块，让浏览器只加载当前需要的部分。结合动态导入和构建工具（如 Webpack、Vite 或 Rollup），可以自动完成这一过程。

立即学习“Java免费学习笔记（深入）”；

使用 import() 加载路由组件（例如在单页应用中）
延迟加载功能模块（如图表、编辑器等重型库）
根据设备或用户权限加载不同模块

路由场景示例：

<pre class="brush:php;toolbar:false;">const routes = {
  '/home': () => import('./pages/Home.js'),
  '/about': () => import('./pages/About.js'),
  '/admin': () => import('./pages/Admin.js')
};

function navigate(path) {
  routes[path]()
    .then(({ default: Page }) => {
      render(Page);
    });
}

登录后复制

这样每个页面对应的代码会被打包成独立的 chunk，访问哪个页面才加载哪个模块。

eMart 网店系统

功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标