代码分割与懒加载策略_使用动态import提升性能-js教程-PHP中文网

代码分割与懒加载策略_使用动态import提升性能

幻影之瞳

发布： 2025-12-02 18:52:02

原创

915人浏览过

动态 import 是指通过 import() 语法在运行时按需加载模块，与静态 import 立即加载不同，它返回 Promise，支持代码分割与懒加载。结合 React.lazy 可实现路由级分割，用户访问时才加载对应组件；也可用于条件性加载重功能，如点击触发或空闲预加载。构建工具如 Webpack、Vite 原生支持，需配置 chunk 分割、命名及魔法注释优化管理。合理使用可显著减少首屏体积，提升加载性能。

代码分割与懒加载策略_使用动态import提升性能

在现代前端开发中，随着应用体积不断增大，首屏加载时间可能显著增加。为优化用户体验，代码分割（Code Splitting）与懒加载（Lazy Loading）成为关键手段。其中，动态 import() 是实现这些策略的核心技术之一。

什么是动态 import

与静态 import 在模块顶层立即加载不同，动态 import() 返回一个 Promise，允许在运行时按需加载模块。这使得我们可以在特定条件触发时才加载某段代码，比如用户点击某个按钮或进入某个路由。

示例：

    button.addEventListener('click', async () => {
      const module = await import('./heavyFeature.js');
      module.init();
    });

登录后复制

上面的代码只有在用户点击按钮后才会加载 heavyFeature.js，避免了初始加载时的资源浪费。

路由级代码分割

在单页应用（SPA）中，将每个路由对应的组件拆分为独立的代码块能显著减少首页加载量。结合框架如 React 或 Vue，配合 Webpack、Vite 等构建工具，可轻松实现。

以 React 为例，使用 React.lazy 和动态 import 按需加载路由组件：

  const Home = React.lazy(() => import('./routes/Home'));
  const About = React.lazy(() => import('./routes/About'));
<p>function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
);
}

登录后复制

Webpack 会自动将这些模块打包成单独的 chunk，当用户访问对应路径时才加载。