【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）

基于 Create React App路由4.0的异步组件加载

本文章是一个额外的篇章，它能够在你的React app中，帮助加快初始的加载组件时间。固然这个操做不是彻底必要的，但若是你好奇的话，请随意跟随这篇文章一块儿用Create React App和 react路由4.0的异步加载方式来帮助react.js构建大型应用。

代码分割（Code Splitting）

当咱们用react.js写咱们的单页应用程序时候，这个应用会变得愈来愈大，一个应用（或者路由页面）可能会引入大量的组件，但是有些组件是第一次加载的时候是没必要要的，这些没必要要的组件会浪费不少的加载时间。

你可能会注意到 Create React App 在打包完毕以后会生成一个很大的.js文件，这包含了咱们应用程序须要的全部JavaScript。可是，若是用户只是加载登陆页面去登陆网站，咱们加载应用程序的其他部分是没有意义的。在咱们的应用程序还很小的时候，这并非一个问题，可是它倒是咱们程序猿优化的一个东西。为了解决这个问题，Create React App有一个很是简单的代码分割的的方案。

代码分割和 react-router

在咱们 react app 中，常见的路由配置多是像下面同样的

/* 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>
);

咱们一开始引入这些组件，而后定义好的路径，会根据咱们的路由去匹配这些组件。

可是，咱们静态地在顶部导入路由中的全部组件。这意味着，无论哪一个路由匹配，全部这些组件都被加载。咱们只想加载对匹配路由的时候才加载响应的组件。下面咱们一步步来完成这个使命。

建立一个异步组件

建立一个js 文件，如：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;
}

咱们在这里作了一些事情：

1. 这个asyncComponent 函数接受一个importComponent 的参数，importComponent 调用时候将动态引入给定的组件。

2. 在componentDidMount 咱们只是简单地调用importComponent 函数，并将动态加载的组件保存在状态中。

3. 最后，若是完成渲染，咱们有条件地提供组件。在这里咱们若是不写null的话，也可提供一个菊花图，表明着组件正在渲染。

使用异步组件

如今让咱们使用咱们的异步组件，而不是像开始的静态去引入。

import Home from './containers/Home';

咱们要用asyncComponent组件来动态引入咱们须要的组件。

tip： 别忘记 先 import asyncComponent from './AsyncComponent

const AsyncHome = asyncComponent(() => import('./containers/Home'));

咱们将要使用 AsyncHome 这个组件在咱们的路由里面

<Route path="/" exact component={AsyncHome} />

如今让咱们回到Notes项目并应用这些更改。

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>
);

只需几回更改就至关酷了。咱们的app都是设置了代码分割而的。也没有增长太多的复杂性。
这里咱们看看以前的这个src/Routes.js路由文件

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import AppliedRoute from './components/AppliedRoute';
import AuthenticatedRoute from './components/AuthenticatedRoute';
import UnauthenticatedRoute from './components/UnauthenticatedRoute';

import Home from './containers/Home';
import Login from './containers/Login';
import Notes from './containers/Notes';
import Signup from './containers/Signup';
import NewNote from './containers/NewNote';
import NotFound from './containers/NotFound';

export default ({ childProps }) => (
  <Switch>
    <AppliedRoute path="/" exact component={Home} props={childProps} />
    <UnauthenticatedRoute path="/login" exact component={Login} props={childProps} />
    <UnauthenticatedRoute path="/signup" exact component={Signup} props={childProps} />
    <AuthenticatedRoute path="/notes/new" exact component={NewNote} props={childProps} />
    <AuthenticatedRoute path="/notes/:id" exact component={Notes} props={childProps} />
    { /* Finally, catch all unmatched routes */ }
    <Route component={NotFound} />
  </Switch>
);

注意，不要在顶部的引入全部的组件。咱们正在建立这些代码分割的功能，以便在必要时为咱们进行动态导入。

如今你运行npm run build 您将看到代码已经被分割成一个个小文件。

下面是部署好的在网站的真实截图

每一个.chunk.js都是须要的时候才加载的。固然咱们的程序是至关小的，而且分离在各个部分的小组件，是不须要这样子按需加载的。仍是看你项目的需求。

原文地址：http://serverless-stack.com/c...