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

动态导入模块_javascript代码分割

betcha

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

原创

459人浏览过

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

动态导入模块_javascript代码分割

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

什么是动态导入

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

示例：

button.addEventListener('click', () => {
  import('./module.js')
    .then(module => {
      module.default();
    })
    .catch(err => {
      console.error('模块加载失败', err);
    });
});

登录后复制

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

如何实现代码分割

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

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

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

路由场景示例：

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，访问哪个页面才加载哪个模块。

慧博商城系统HuiboShop2011

慧博商城系统HuiboShop2011系统特色：1、上百套模板随意下载切换、模板定时更新；2、csv数据导入、数据定向读取，一键导入商品信息，省时、省力； 3、多会员等级管理，一站搞定零售、批发、代销；4、可集成网站分销功能模块，缔造庞大的代理业务链，代理客户一键铺货；5、代码严谨，防SQL注入；前后台用户分开管理，密码不可逆加密；6、简单易操作、只需几分钟搞定一个商城网站；商城后台帐号admin