基于 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;
}
我们在这里做了一些事情：
这个asynccomponent 函数接受一个importcomponent 的参数，importcomponent 调用时候将动态引入给定的组件。
在componentdidmount 我们只是简单地调用importcomponent 函数，并将动态加载的组件保存在状态中。
最后，如果完成渲染，我们有条件地提供组件。在这里我们如果不写null的话，也可提供一个菊花图，代表着组件正在渲染。
使用异步组件
现在让我们使用我们的异步组件，而不是像开始的静态去引入。
我们要用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 }) => (
<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} />
只需几次更改就相当酷了。我们的app都是设置了代码分割而的。也没有增加太多的复杂性。
这里我们看看之前的这个src/routes.js路由文件
import login from './containers/login';
import notes from './containers/notes';
import signup from './containers/signup';
import newnote from './containers/newnote';
<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} />
注意，不要在顶部的引入所有的组件。我们正在创建这些代码分割的功能，以便在必要时为我们进行动态导入。
现在你运行npm run build 您将看到代码已经被分割成一个个小文件。
下面是部署好的在网站的真实截图
每个.chunk.js都是需要的时候才加载的。当然我们的程序是相当小的，并且分离在各个部分的小组件，是不需要这样子按需加载的。还是看你项目的需求。
作者：佚名
来源：51cto