基于CreateReactApp路由4.0的异步组件加载本文是一个额外的章节，可以帮助加快你的React应用程序的初始化加载时间组件。当然，这个操作并不是完全必须的，但如果你有好奇心，欢迎关注这篇文章，使用CreateReactApp和reactrouting4.0的异步加载方式来帮助react.js构建大型应用。代码拆分（CodeSplitting）当我们使用react.js来写我们的单页面应用时，应用会越来越大，一个应用（或者路由页面）可能会引入大量的组件，但是有些组件是最先出现的加载一次就不需要了，这些不需要的组件会浪费很多加载时间。你可能会注意到CreateReactApp在打包后生成了一个很大的.js文件，其中包含了我们应用程序所需的所有JavaScript。但是如果用户只是加载登录页面来登录网站，那么我们加载应用程序的其余部分就没有意义了。当我们的应用程序很小时，这不是问题，但这是我们程序员优化的东西。为了解决这个问题，CreateReactApp有一个非常简单的代码拆分方案。代码拆分和react-router在我们的reactapp中，常见的路由配置可能如下from'./containers/NotFound';/*使用组件定义路由*/exportdefault()=>();我们一开始就引入这些组件，然后定义的路径会根据我们的路由匹配这些组件。但是，我们在顶部静态导入路由中的所有组件。这意味着，无论哪个路由匹配，所有这些组件都会被加载。我们只想加载响应匹配路由的组件。让我们一步一步地完成这个过程。创建一个异步组件创建一个js文件，如：src/components/AsyncComponent.js，代码如下importReact,{Component}from"react";exportdefaultfunctionasyncComponent(importComponent){classAsyncComponentextendsComponent{constructor(props){super(props);this.state={component:null};}asynccomponentDidMount(){const{default:component}=awaitimportComponent();this.setState({component:component});}render(){constC=this.state.component;返回C?:空;}}returnAsyncComponent;}我们在这里做了一些事情：asyncComponent函数接受一个importComponent参数，importComponent被调用时，给定的组件将被动态导入。在componentDidMount中，我们只需调用importComponent函数并将动态加载的组件保存在状态中。最后，如果完成渲染，我们有条件地提供组件。这里如果不写null，也可以提供菊花图，表示组件正在渲染。使用异步组件现在让我们使用我们的异步组件，而不是像开始时那样静态导入它们。从“./containers/Home”导入主页；我们需要使用asyncComponent组件来动态导入我们需要的组件。提示：不要忘记从'./AsyncComponentconstAsyncHome=asyncComponent(()=>import('./containers/Home'));导入asyncComponent我们将在路由中使用AsyncHome组件现在让我们回到Notes项目并应用这些更改。src/Routes.jsimportReactfrom'react';import{Route,Switch}from'react-router-dom';importasyncComponentfrom'./components/AsyncComponent';importAppliedRoutefrom'./components/AppliedRoute';importAuthenticatedRoute从'./components/AuthenticatedRoute';从'./components/UnauthenticatedRoute'导入UnauthenticatedRoute;constAsyncHome=asyncComponent(()=>import('./containers/Home'));constAsyncLogin=asyncComponent(()=>import('./containers/Login'));constAsyncNotes=asyncComponent(()=>import('./containers/Notes'));constAsyncSignup=asyncComponent(()=>import('./containers/Signup'));constAsyncNewNote=asyncComponent(()=>import('./containers/NewNote'));constAsyncNotFound=asyncComponent(()=>import('./containers/NotFound'));导出默认值({childProps})=>({/*最后，捕获所有不匹配的路由*/}<路由组件={AsyncNotFound}/>);只需进行一些更改就非常酷我们的应用程序都设置了代码拆分。它也不会增加太多的复杂性。在这里我们看之前的这个src/Routes.js路径由文件importReactfrom'react';import{Route,Switch}from'react-router-dom';importAppliedRoutefrom'./components/AppliedRoute';importAuthenticatedRoutefrom'./components/AuthenticatedRoute'；从'./components/UnauthenticatedRoute'导入UnauthenticatedRoute；从'./containers/Home'导入Home；从'./containers/Login'导入Login；从'./containers/Notes导入Notes';从'./containers/Signup'导入注册；从'./containers/NewNote'导入NewNote；从'./containers/NotFound'导入NotFound；导出默认值({childProps})=>({/*最后，捕获所有不匹配的路由*/});请注意，我们没有在顶部导入所有组件，而是创建了这些代码拆分功能，以便在必要时为我们执行动态导入。现在你运行npmrunbuild，你会看到代码已经被拆分成更小的文件。下面是部署好的网站的真实截图。每个.chunk.js在需要时加载。当然，我们的程序很小，分散成各个部分的小组件不需要通过这种方式按需加载。还是要看你项目的需要。原文地址：http://serverless-stack.com/c...
