JavaScript中ESModule怎么使用import()动态导入实现路由懒加载与按需加载-js教程-PHP中文网

import() 是返回 promise 的动态导入函数，用于路由懒加载、组件按需加载及普通模块按需加载，支持 webpack/vite 魔法注释优化 chunk 名称。

javascript中esmodule怎么使用import()动态导入实现路由懒加载与按需加载

ESModule 的 import() 是一个返回 Promise 的函数，用于动态导入模块，特别适合实现路由懒加载和组件按需加载。它不会在编译时静态解析依赖，而是在运行时按需触发加载，从而拆分代码、减小首屏体积。

路由懒加载（以 Vue Router 为例）

在定义路由时，把组件的导入写成 import() 函数调用，而不是静态 import。这样 Webpack 或 Vite 会自动将该组件打包为独立 chunk。

Vue Router 4（组合式 API）写法：

{
  path: '/user',
  name: 'User',
  component: () => import('@/views/User.vue')
}

注意：必须用箭头函数包裹 import()，否则会立即执行；import() 返回 Promise，Router 内部会自动处理异步加载逻辑。

React Router 中的懒加载（配合 React.lazy）

React 不原生支持 import() 直接用于组件渲染，需搭配 React.lazy 和 Suspense：

定义懒加载组件：

const Home = React.lazy(() => import('./pages/Home'));  
const About = React.lazy(() => import('./pages/About'));

在路由中使用，并包裹 <suspense></suspense> 处理加载状态：

<suspense fallback="{<Spinner"></suspense>}>
  <routes><route path="/" element="{<Home"></route>} />
    <route path="/about" element="{<About"></route>} />
  </routes>

普通模块的按需加载（非路由场景）

比如点击按钮后才加载某个工具类或 heavy 组件：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

直接调用 import() 并 await 结果：

async function handleOpenPDF() {
  const { default: PDFViewer } = await import('./components/PDFViewer');
  // 使用 PDFViewer 组件或方法
  new PDFViewer().render();
}

也可以解构命名导出（如果模块有具名导出）：

const { utils } = await import('./utils/math');

注意：多次调用同一路径的 import() 会复用已缓存的模块，不会重复请求。

配合 Webpack 魔法注释优化 chunk 名称

可在 import() 中添加注释，让打包工具生成更可读的文件名：

component: () => import(/* webpackChunkName: "user-module" */ '@/views/User.vue')

Vite 也支持类似语法（/* viteIgnore */ 或直接识别 webpackChunkName），便于调试和 CDN 缓存管理。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南