React 代码拆分的几种方式

1,234 阅读2分钟

前沿

当我们项目越来越大的时候,代码的体积会变得庞大,导致我们项目的加载速度变慢,特别是如果您包含大型第三方库。您需要密切关注包含在bundle中的代码,以免我们的项目体积太大,导致加载时间长,影响用户体验。在React项目中,我们可以通过以下几种方式对代码进行拆分,可以将代码拆分成小的块。让我们的网站速度变快。

动态加载(import)

es6提供import()函数,它是运行时执行,也就是说,什么时候运行到这一句,就会加载指定的模块。
import()返回一个 Promise 对象。在React中,我们可以这样去做。通过打包工具,会在打包的过程中对PageModuels生成单独的文件,在运行的时候异步加载

import React, { useState, useEffect } from 'react';

const Index = () => {
  const [Cmp, setCmp] = useState(null);

  useEffect(() => {
    import('./PageModules').then((mod) => setCmp(mod.default));
  }, []);

  return Cmp ? <Cmp /> : <div>Loading...</div>;
};

loadable component

Loadable Components是一个高阶组件,允许您将代码拆分为更小的块并按需加载,支持服务端渲染,使用方式比较简单。

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

它和我们接下来要介绍的React.lazy还有些区别,可参考 loadable-components.com/docs/loadab…

React Lazy 和 React Suspense

React Lazy是react官方提供的解决方案,非常推荐使用该方案去做代码拆分.需要React.Suspense配合, 该组件可以指定加载指示器(loading indicator),以防其组件树中的某些子组件尚未具备渲染条件。使用方式如下

// 该组件是动态加载的
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // 显示 <Spinner> 组件直至 OtherComponent 加载完成
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

参考

结束语

如果是新的项目且不需要服务端渲染,推荐使用React.lazy。如果需要服务端渲染的话,推荐使用loadable component。小伙伴们可以分析下你们项目的依赖,把一些模块拆成独立的模块,减少代码体积。

如果你觉得该文章不错,不妨

1、点赞,让更多的人也能看到这篇内容

2、关注我,让我们成为长期关系

3、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章