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

;

}

return AsyncComponent;

}

我们在这里做了一些工作：

这个asyncComponent 函数接收一个importComponent 的参数，importComponent 调用时刻将动态惹人给定的组件。
在componentDidMount 我们只是简单地调用importComponent 函数，并将动态加载的组件保存在状况中。
最后，如不雅完成衬着，我们有前提地供给组件。在这里我们如不雅不写null的话，也可供给一个菊花图，代表着组件正在衬着。

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

应用异步组件

如今让我们应用我们的异步组件，而不是像开端的静态去惹人。

import Home from './containers/Home';

我们要用asyncComponent组件来动态惹人我们须要的组件。

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

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

我们将要应用 AsyncHome 这个组件在我们的路由琅绫擎

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

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

你可能会留意到 Create React App 在打包完毕之后会生成一个很大年夜的.js文件，这包含了我们应用法度榜样须要的所有JavaScript。然则，如不雅用户只是加载登录页面去登录网站，我们加载应用法度榜样的其余部分是没有意义的。在我们的应用法度榜样还很小的时刻，这并不是一个问题，然则它倒是我们法度榜样猿优化的一个器械。为懂得决这个问题，Create React App有一个异常简单的代码瓜分的的筹划。

src/Routes.js

创建一个异步组件

当我们用react.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	
			 2/4   首页 上一页 1 2 3 4 下一页 尾页	
			

　　推荐阅读
　　浪潮将发布服务器新品  聚焦智慧计算
            
            
                
                    
                
                【51CTO.com原创稿件】 2017年7月6日，海潮经由过程其官方微信宣布了将于7月12日宣布其新一代办事器&mdash;&m>>>详细阅读


本文标题：【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
地址：http://www.17bianji.com/lsqh/36075.html
 1/2    1