JS如何实现懒加载组件？React.lazy的使用方法是什么

在React项目开发中，当项目体积逐渐增大，首屏需要加载的组件资源过多时，很容易出现首屏加载缓慢的问题。此时可以通过懒加载的方式，让组件在需要渲染的时候才去加载对应的资源，减少首屏的资源请求量。React官方提供了React.lazy API来实现组件的懒加载，配合Suspense组件可以很方便地完成相关功能。

React.lazy的基本使用

React.lazy接受一个函数作为参数，这个函数需要动态调用import()来引入组件，返回的是一个Promise，当组件需要渲染时才会执行这个动态引入的逻辑。引入的组件需要配合Suspense组件使用，Suspense可以在组件加载过程中展示 fallback 指定的加载占位内容。

下面是一个最简单的使用示例，我们创建一个需要懒加载的About组件，在路由切换到对应页面时才加载该组件：

// 懒加载About组件
const About = React.lazy(() => import('./components/About'));

function App() {
  return (
    <div className="app">
      <h1>首页</h1>
      {/* Suspense包裹懒加载组件，加载时展示fallback内容 */}
      <React.Suspense fallback={<div>组件加载中...</div>}>
        <About />
      </React.Suspense>
    </div>
  );
}

export default App;

React.lazy结合路由实现懒加载

在实际项目中，组件懒加载最常和路由结合使用，让不同路由对应的页面组件在切换路由时才加载，大幅减少首屏需要加载的页面资源。下面是结合react-router-dom的实现示例：

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

// 懒加载各个页面组件
const Home = React.lazy(() => import('./pages/Home'));
const List = React.lazy(() => import('./pages/List'));
const Detail = React.lazy(() => import('./pages/Detail'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>页面加载中...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/list" element={<List />} />
          <Route path="/detail/:id" element={<Detail />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

React.lazy的注意事项

• React.lazy目前只支持默认导出的组件，如果组件是命名导出，需要先转换成默认导出再使用。比如组件是export const MyComponent，需要在引入的文件中做一层转换：export { default as MyComponent } from './MyComponent'，再使用React.lazy引入。
• Suspense组件只能用于包裹React.lazy引入的组件，不能用于包裹普通的组件，否则会报错。
• fallback属性接收的是一个React元素，可以是加载动画、文字提示等任意合法的React渲染内容，不能是字符串或者数字。
• React.lazy是基于动态import()实现的，动态import()是ES6的特性，如果需要兼容旧版浏览器，需要配置对应的babel插件或者polyfill。

其他JS实现组件懒加载的方式

如果不是React项目，也可以通过原生的JS实现组件的懒加载。核心思路是通过动态创建<script>标签，在需要加载组件的时候插入标签加载对应的JS文件，加载完成后执行组件的渲染逻辑。下面是一个简单的原生实现示例：

// 组件加载函数
function loadComponent(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  script.onload = () => {
    // 假设组件加载后会在window上挂载对应的组件构造函数
    callback(window.LoadedComponent);
  };
  document.body.appendChild(script);
}

// 使用方式
const loadBtn = document.getElementById('loadBtn');
loadBtn.addEventListener('click', () => {
  loadComponent('http://ipipp.com/components/component.js', (Component) => {
    const container = document.getElementById('container');
    new Component(container);
  });
});

总结

React.lazy是React官方提供的组件懒加载方案，使用简单且和React生态结合紧密，是React项目实现组件懒加载的首选方案。如果是其他框架或者原生JS项目，也可以通过动态加载资源的思路实现类似的懒加载效果。合理使用组件懒加载可以有效减少首屏加载的资源体积，提升用户体验，是前端性能优化的重要手段之一。

React_lazyJS懒加载组件懒加载Suspense修改时间：2026-06-28 03:51:27