您的位置: 首页  >  文章  >  react路由组件动态加载-优化首屏加载速度

react路由组件动态加载-优化首屏加载速度

分类: 文章 • 2024-05-26 10:22:10

通常情况下，使用create-react-app进行打包后，会生成最终打包文件main.js，且这个文件在项目内容变多，引用第三方插件后，但得很大(>100kb)。

  • 通过Code Spliting进行代码拆分，并使用动态import使路由对应组件在使用时才被加载，可以优化打包，由原来一个main.js生成为多个单独的js文件，并在首次加载时，只加载首屏用到的组件，从而提高首屏加载速度。
  • 官方提供了React.lazy来进行组件的动态导入，用以优化页面加载速度

动态import与React Router V4

  • 【旧方式】通常我们在写React路由时，是以以下这种方式：
/* Import the components */
import Home from "./containers/Home";
import Posts from "./containers/Posts";
import NotFound from "./containers/NotFound";

/* Use components to define routes */
export default () =>
  <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/posts/:id" exact component={Posts} />
    <Route component={NotFound} />
  </Switch>;
  • Switch用于渲染匹配当前路径的路由
  • 以上，当我们将所有组件都在文件顶部引入时，意味着所有的组件都会被全部加载，而我们通过Code Spliting可以实现只加载匹配当前路径的路由对应组件功能。

优化CodeSpliting

构建一个异步导入组件 Async Component

首先我们需要创建一个用于异步加载组件的函数：

  • 添加如下文件src/components/AsyncComponent.js 
import React, { Component } from "react";

export default function asyncComponent(importComponent) {
 class AsyncComponent extends Component {
   constructor(props) {
     super(props);

     this.state = {
       component: null
     };
   }

   async componentDidMount() {
     const { default: component } = await importComponent();

     this.setState({
       component: component
     });
   }

   render() {
     const C = this.state.component;

     return C ? <C {...this.props} /> : null;
   }
 }

 return AsyncComponent;
}
  • 关于async-await的理解可以参考这篇文章：异步神器async-await
    以上代码做了如下几件事：
  1. asyncComponent函数以一个importComponent函数作为参数，importComponent用于动态调用一个组件。
  2. 在生命周期函数componentDidMount中，我们通过调用importComponent来引入函数，并存入到asyncComponent组件的state中
  3. 最后，如果组件已完成加载，我们有条件地呈现该组件。在render中，我们除了可以简单使用return null来应对未加载组件情况外，还可以使用一个loading spinner加载动画组件来提升用户体验，避免白屏。
使用异步组件

原来引用组件的方式如下：

import Home from './containers/Home'
  • 【优化写法】
const AsyncHome = asyncComponent(()=>import('./containers/Home'))
  • 注意：这里我们只是在AysncHome组件被创建时使用了一个函数来动态import()，并没有直接同步的导入了Home组件。webpack将会基于此做代码拆分。
// 最后使用异步组件
<Route path="/" exact component={AsyncHome} />
完整示例
  • src/Routes.js
import React from "react";
import { Route, Switch } from "react-router-dom";
import asyncComponent from "./components/AsyncComponent";
import AppliedRoute from "./components/AppliedRoute";
import AuthenticatedRoute from "./components/AuthenticatedRoute";
import UnauthenticatedRoute from "./components/UnauthenticatedRoute";

const AsyncHome = asyncComponent(() => import("./containers/Home"));
const AsyncLogin = asyncComponent(() => import("./containers/Login"));
const AsyncNotes = asyncComponent(() => import("./containers/Notes"));
const AsyncSignup = asyncComponent(() => import("./containers/Signup"));
const AsyncNewNote = asyncComponent(() => import("./containers/NewNote"));
const AsyncNotFound = asyncComponent(() => import("./containers/NotFound"));

export default ({ childProps }) =>
  <Switch>
    <AppliedRoute
      path="/"
      exact
      component={AsyncHome}
      props={childProps}
    />
    <UnauthenticatedRoute
      path="/login"
      exact
      component={AsyncLogin}
      props={childProps}
    />
    <UnauthenticatedRoute
      path="/signup"
      exact
      component={AsyncSignup}
      props={childProps}
    />
    <AuthenticatedRoute
      path="/notes/new"
      exact
      component={AsyncNewNote}
      props={childProps}
    />
    <AuthenticatedRoute
      path="/notes/:id"
      exact
      component={AsyncNotes}
      props={childProps}
    />
    {/* Finally, catch all unmatched routes */}
    <Route component={AsyncNotFound} />
  </Switch>
;
  • 通过以上优化后，我们可以再次打包看看npm run build
  • 打包后可以看到：
    react路由组件动态加载-优化首屏加载速度
  • 以上任何.chunk.js文件都对应着一个动态import()导入的组件，当项目体量变量时，这样的优化将会更明显。

实际应用

  • 以上动态加载组件的函数asyncComponent实际已经有对应的成熟的库React.lazy。下面示例介绍如何使用React Router和React.lazy设置基于路由的代码拆分应用。
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);
  • Suspense组件用于处理组件未加载完成时，显示loading的情况。fallback接受任意React组件

写在最后

  • 通过动态加载可以很好的拆分代码，提升加载速度，而实现路由动态加载的关键在于:一个动态导入组件的函数、对路由组件使用动态导入

给组件加载过程中加loading spinner，当组件加载耗时长或者失败时，需要一个友好提示。

  • 推荐使用react-loadable，简单使用方式如下：
$ npm install --save react-loadable

// 在异步组件中使用
const AsyncHome = Loadable({
  loader: () => import("./containers/Home"),
  loading: MyLoadingComponent
});
// MyLoadingComponent长这样:
const MyLoadingComponent = ({isLoading, error}) => {
  // Handle the loading state
  if (isLoading) {
    return <div>Loading...</div>;
  }
  // Handle the error state
  else if (error) {
    return <div>Sorry, there was a problem loading the page.</div>;
  }
  else {
    return null;
  }
};

相关推荐