React路由懒加载相关实践

路由懒加载的作用意义

路由懒加载是前端性能优化绕不开的一个话题，它的基本思想是在路由被实际访问前不加载对应的组件，而是需要时才进行异步加载。这样可以优化网页的初始加载时间。那么今天就来分享一篇React的路由懒加载实践。

Arco Desgin Pro中对路由懒加载的相关处理

在Arco Desgin Pro中的lazyload.tsx文件中，对路由懒加载是这样处理的：

import React from 'react';
import loadable from '@loadable/component';
import { Spin } from '@arco-design/web-react';
import styles from '../style/layout.module.less';

// https://github.com/gregberge/loadable-components/pull/226
function load(fn, options) {
  const Component = loadable(fn, options);

  Component.preload = fn.requireAsync || fn;

  return Component;
}

function LoadingComponent(props: {
  error: boolean;
  timedOut: boolean;
  pastDelay: boolean;
}) {
  if (props.error) {
    console.error(props.error);
    return null;
  }
  return (
    <div className={styles.spin}>
      <Spin />
    </div>
  );
}

export default (loader) =>
  load(loader, {
    fallback: LoadingComponent({
      pastDelay: true,
      error: false,
      timedOut: false,
    }),
  });

代码不难理解，第一个函数是对需要渲染的组件进行路由懒加载的设置。第二个函数则是根据传递过来的参数是否是错误的进行报错或者显示出加载的一个组件。这个文件最后导出了一个函数，用来供外界传入需要懒加载的组件。最主要的内容是使用了第三方的@loadable/componen依赖。

那么React对路由懒加载只有这一个方式吗？本着刨根问底的想法我找到的Chatgpt，果然帮我补充了一些其他知识。

其他路由懒加载的方法

在React中，我们是可以使用动态import()语法结合React.lazy()和Suspense组件来实现路由的懒加载。它是基于react-router-dom来实现的。代码具体如下：

import React, { lazy, Suspense } from 'react';  
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';  
import LoadingComponent from './LoadingComponent'; // 自定义的加载组件  
  
// 使用动态import()语法懒加载页面组件  
const Home = lazy(() => import('./routes/Home'));  
const About = lazy(() => import('./routes/About'));  
  
const App = () => {  
  return (  
    <Router>  
      <Suspense fallback={<LoadingComponent />}>  
        <Switch>  
          <Route exact path="/" component={Home} />  
          <Route path="/about" component={About} />  
        </Switch>  
      </Suspense>  
    </Router>  
  );  
};  
  
export default App;

这个例子中，React.lazy()可以实现路由懒加载页面。而Suspense是 React 中的一个内置组件，它用于在组件树中指定加载指示器，特别是在使用 React.lazy() 进行组件懒加载时。当 React.lazy() 加载的组件尚未准备好时（即组件代码尚未被下载和执行），Suspense 会显示其 fallback 属性中指定的内容。这通常是一个加载指示器，告诉用户内容正在加载中。

Switch的作用在于，它确保了在给定的URL下，只渲染第一个匹配的<Route>组件。如果url是'/'，会渲染<Home/>组件，如果url是'/about'，则会渲染<About/>组件。excat作用在于唯一匹配性，也就是说只有路径为'/'时，才会渲染匹配到<Home/>组件。

至此，关于路由懒加载的知识也就介绍到这里，相信能给各位带来一定的帮助吧。