动态 import() 是一种按需加载模块的语法，返回 Promise，用于运行时动态加载代码。与静态 import 不同，它支持条件加载和懒加载，常用于路由分割或用户交互场景。结合 Webpack 等工具，可自动将动态引入的模块拆分为独立 chunk，实现代码分割。在 React 中，可配合 React.lazy 和 Suspense 实现组件级懒加载，提升首屏性能。使用时应避免过度拆分、注意路径静态化和错误处理，合理优化加载策略以平衡请求开销与加载效率。

现代前端项目中，随着功能增多，打包后的 J*aScript 文件体积也会变大，影响首屏加载速度。代码分割（Code Spliting）和懒加载是优化性能的重要手段。通过动态 import() 实现按需加载模块，可以有效减少初始加载资源量。

动态 import() 是什么？

不同于静态的 import 语法在文件顶部引入模块，动态 import() 返回一个 Promise，允许我们在运行时按需加载模块。

它返回的是一个异步加载的模块对象，适合用于条件加载、路由切换或用户交互触发的场景。

示例：

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

上面代码中，he*yModule.js 只有在按钮点击后才会被请求和执行，实现真正的“懒”加载。

与 Webpack 等构建工具结合使用

像 Webpack、Vite 这类构建工具原生支持动态 import()，会自动将被动态引入的模块拆分为独立的 chunk 文件。

Webpack 会根据代码结构生成多个 bundle，例如：1.js、2.js，并在需要时通过 JSONP 或原生 script 标签注入页面。

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 webpack 配置示例（默认已支持）：

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

开启 splitChunks 后，公共依赖会被提取，动态导入的模块自动分包。

在路由中实现懒加载（React 场景）

React 项目常结合 React.lazy 和 Suspense 实现组件级懒加载，特别适用于基于路由的代码分割。

示例：配合 React Router 使用

import { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

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

function App() {
  return (
    <Router>
      <Suspense fallback="加载中...">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

访问 /about 路径时，才会加载对应的组件文件，降低首页加载负担。

注意事项与最佳实践

• 避免过度拆分，过多的小文件会增加 HTTP 请求开销，建议按路由或功能域划分
• 动态 import 不支持变量路径，如 import(`./${name}.js`) 会导致整个目录被打包（Webpack 上下文模块）
• 注意错误处理，网络异常或模块加载失败应有降级提示
• Suspense 的 fallback 应简洁，避免复杂逻辑

基本上就这些。合理使用动态 import()，能让应用启动更快、体验更流畅。关键是把“重”的部分延后，让核心内容优先呈现。不复杂但容易忽略。

以上就是代码分割：动态import()与懒加载实现的详细内容，更多请关注其它相关文章！

# react  # javascript  # java  # js  # 前端  # json  # vite  # app  # 工具  # 懒加载  # 路由  # 异步加载  # 加载  # 按需  # 才会  # 表单  # 绑定  # 如何使用  # 有什么区别  # 的是  # 是一种  # 也会  # 广告营销推广方案ppt  # 闪电精灵seo操作  # 连锁酒店的营销推广视频  # 中山营销策划推广  # 辽宁seo培训  # 无极行业网站推广教程下载  # 淘宝店铺seo优化方法  # 海南网站优化服务哪家好  # 乐园营销推广方案  # seo竞争对手数据抓取