likes
comments
collection
share

React 组件按需加载方案对比

作者站长头像
站长
· 阅读数 31

在前端开发中，代码分割和按需加载是提升应用性能的重要手段。本文将对几种React组件按需加载的方案进行分析，并给出每种方案的示例代码。

方案对比

方案Weekly Downloads(npm)Unpacked Size(npm)Stars(github)使用难易度使用后产物体积变化特点
import() + @babel/plugin-syntax-dynamic-import---需要稍微封装一下有限制适用于非组件资源、父组件引入子组件
React.lazy---容易上手+0官方提供，容易上手
react-loadable287,29647.5 kB16.6k容易上手+17.2 KB容易上手
@loadable/component441,71895 kB7.6k容易上手+15.79 KB容易上手

以上数据截止于 20240716

方案说明

1. import() + @babel/plugin-syntax-dynamic-import

import() 是 JavaScript 原生的动态引入语法，可以用于按需加载模块。结合 Babel 插件 @babel/plugin-syntax-dynamic-import，可以在 React 项目中使用这种语法。

特点

  • 不适用于 router 包裹的组件
  • 可用于父组件引入子组件
  • 适用于按需加载某些非组件资源

2. React.lazy + Suspense

React.lazy 是 React 官方提供的用于动态加载组件的 API，结合 Suspense 组件可以实现组件的按需加载。

特点

  • 容易上手
  • 无需引入额外的依赖包

示例代码

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

3. react-loadable

react-loadable 是一个轻量级的代码分割组件库，允许在需要的时候加载组件，适用于在 React 应用中进行代码分割。

特点

  • 容易上手
  • 未压缩前仅有 17.2 KB，对代码总体积影响不大

示例代码

import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
  loader: () => import('./LazyComponent'),
  loading: () => <div>Loading...</div>,
});

function App() {
  return <LoadableComponent />;
}

4. @loadable/component

@loadable/component 是一个用于按需加载 React 组件的库，支持配置和丰富的功能。

特点

  • 容易上手
  • 未压缩前仅有 15.79 KB，对代码总体积影响不大

示例代码

import loadable from '@loadable/component';

const LoadableComponent = loadable(() => import('./LazyComponent'));

function App() {
  return <LoadableComponent />;
}

服务端渲染

对于服务端渲染的项目，React.lazy 和 Suspense 目前还不支持服务端渲染，可以选择使用 react-loadable 或 @loadable/component，这两个库都支持服务端渲染。

示例代码（@loadable/component + 服务端渲染）

// 服务端入口文件
import { ChunkExtractor } from '@loadable/server';
import express from 'express';
import path from 'path';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';

const statsFile = path.resolve('./build/loadable-stats.json');
const extractor = new ChunkExtractor({ statsFile });

const app = express();
app.use(express.static('build'));

app.get('*', (req, res) => {
  const jsx = extractor.collectChunks(<App />);
  const html = renderToString(jsx);

  res.send(`
    <!doctype html>
    <html>
      <head>${extractor.getLinkTags()}</head>
      <body>
        <div id="root">${html}</div>
        ${extractor.getScriptTags()}
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

以上内容为对React组件按需加载方案的分析与示例代码

小结

综合来看，项目中可以使用 React.lazy，即官方提供的方案，容易上手且不需要引入额外的依赖包。如果是服务端渲染，还需要分析各方案是否支持以及使用成本。根据项目需求选择合适的方案，可以有效提升应用性能并优化用户体验。

转载自:https://juejin.cn/post/7392070976093913151
评论
请登录