【翻译】基于 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 中,常见的路由配置可能是像下面一样的

 
  1. /* Import the components */ 
  2. import Home from './containers/Home'
  3. import Posts from './containers/Posts'
  4. import NotFound from './containers/NotFound'
  5.  
  6.  
  7. /* Use components to define routes */ 
  8. export default () => ( 
  9.   <Switch> 
  10.     <Route path="/" exact component={Home} /> 
  11.     <Route path="/posts/:id" exact component={Posts} /> 
  12.     <Route component={NotFound} /> 
  13.   </Switch> 
  14. );  

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

但是,我们静态地在顶部导入路由中的所有组件。这意味着,不管哪个路由匹配,所有这些组件都被加载。我们只想加载对匹配路由的时候才加载响应的组件。下面我们一步步来完成这个使命。

创建一个异步组件

创建一个js 文件,如:src/components/AsyncComponent.js,代码如下

 
  1. import React, { Component } from 'react'
  2.  
  3. export default function asyncComponent(importComponent) { 
  4.  
  5.   class AsyncComponent extends Component { 
  6.  
  7.     constructor(props) { 
  8.       super(props); 
  9.  
  10.       this.state = { 
  11.         component: null
  12.       }; 
  13.     } 
  14.  
  15.     async componentDidMount() { 
  16.       const { default: component } = await importComponent(); 
  17.  
  18.       this.setState({ 
  19.         component: component 
  20.       }); 
  21.     } 
  22.  
  23.     render() { 
  24.       const C = this.state.component; 
  25.  
  26.       return C 
  27.         ? <C {...this.props} /> 
  28.         : null
  29.     } 
  30.  
  31.   } 
  32.  
  33.   return AsyncComponent; 
  34. }  

我们在这里做了一些事情:

  1. 这个asyncComponent 函数接受一个importComponent 的参数,importComponent 调用时候将动态引入给定的组件。
  2. 在componentDidMount 我们只是简单地调用importComponent 函数,并将动态加载的组件保存在状态中。
  3. 最后,如果完成渲染,我们有条件地提供组件。在这里我们如果不写null的话,也可提供一个菊花图,代表着组件正在渲染。

使用异步组件

现在让我们使用我们的异步组件,而不是像开始的静态去引入。

 
  1. import Home from './containers/Home'

我们要用asyncComponent组件来动态引入我们需要的组件。

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

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

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

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

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

src/Routes.js

 
  1. import React from 'react'
  2. import { Route, Switch } from 'react-router-dom'
  3. import asyncComponent from './components/AsyncComponent'
  4. import AppliedRoute from './components/AppliedRoute'
  5. import AuthenticatedRoute from './components/AuthenticatedRoute'
  6. import UnauthenticatedRoute from './components/UnauthenticatedRoute'
  7.  
  8. const AsyncHome     = asyncComponent(() => import('./containers/Home')); 
  9. const AsyncLogin    = asyncComponent(() => import('./containers/Login')); 
  10. const AsyncNotes    = asyncComponent(() => import('./containers/Notes')); 
  11. const AsyncSignup   = asyncComponent(() => import('./containers/Signup')); 
  12. const AsyncNewNote  = asyncComponent(() => import('./containers/NewNote')); 
  13. const AsyncNotFound = asyncComponent(() => import('./containers/NotFound')); 
  14.  
  15. export default ({ childProps }) => ( 
  16.   <Switch> 
  17.     <AppliedRoute path="/" exact component={AsyncHome} props={childProps} /> 
  18.     <UnauthenticatedRoute path="/login" exact component={AsyncLogin} props={childProps} /> 
  19.     <UnauthenticatedRoute path="/signup" exact component={AsyncSignup} props={childProps} /> 
  20.     <AuthenticatedRoute path="/notes/new" exact component={AsyncNewNote} props={childProps} /> 
  21.     <AuthenticatedRoute path="/notes/:id" exact component={AsyncNotes} props={childProps} /> 
  22.     { /* Finally, catch all unmatched routes */ } 
  23.     <Route component={AsyncNotFound} /> 
  24.   </Switch> 
  25. );  

只需几次更改就相当酷了。我们的app都是设置了代码分割而的。也没有增加太多的复杂性。

这里我们看看之前的这个src/Routes.js路由文件

 
  1. import React from 'react'
  2. import { Route, Switch } from 'react-router-dom'
  3. import AppliedRoute from './components/AppliedRoute'
  4. import AuthenticatedRoute from './components/AuthenticatedRoute'
  5. import UnauthenticatedRoute from './components/UnauthenticatedRoute'
  6.  
  7. import Home from './containers/Home'
  8. import Login from './containers/Login'
  9. import Notes from './containers/Notes'
  10. import Signup from './containers/Signup'
  11. import NewNote from './containers/NewNote'
  12. import NotFound from './containers/NotFound'
  13.  
  14. export default ({ childProps }) => ( 
  15.   <Switch> 
  16.     <AppliedRoute path="/" exact component={Home} props={childProps} /> 
  17.     <UnauthenticatedRoute path="/login" exact component={Login} props={childProps} /> 
  18.     <UnauthenticatedRoute path="/signup" exact component={Signup} props={childProps} /> 
  19.     <AuthenticatedRoute path="/notes/new" exact component={NewNote} props={childProps} /> 
  20.     <AuthenticatedRoute path="/notes/:id" exact component={Notes} props={childProps} /> 
  21.     { /* Finally, catch all unmatched routes */ } 
  22.     <Route component={NotFound} /> 
  23.   </Switch> 
  24. );  

注意,不要在顶部的引入所有的组件。我们正在创建这些代码分割的功能,以便在必要时为我们进行动态导入。

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

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

每个.chunk.js都是需要的时候才加载的。当然我们的程序是相当小的,并且分离在各个部分的小组件,是不需要这样子按需加载的。还是看你项目的需求。


作者:佚名

来源:51CTO

相关文章
|
2月前
|
前端开发 JavaScript
React和Vue实现路由懒加载
React和Vue实现路由懒加载
57 2
|
2月前
|
存储 资源调度 前端开发
React原理 即 React路由基础
React原理 即 React路由基础
66 1
|
2月前
|
前端开发
如何使用react-router v6快速搭建路由?
如何使用react-router v6快速搭建路由?
85 0
|
2月前
|
移动开发 前端开发 API
第三十二章 React路由组件的简单使用
第三十二章 React路由组件的简单使用
|
2月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
81 0
|
2月前
|
前端开发 JavaScript API
React团队回应用Vite替换Create React App的建议
React团队回应用Vite替换Create React App的建议
104 0
|
2月前
|
前端开发
【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
【4月更文挑战第29天】本文介绍了在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法。首先,通过 `npm` 安装 less 或 sass 依赖,然后修改 `config-overrides.js` 配置文件以支持 less/sass 编译。接着,详细阐述如何使用 less/sass 编写样式。再者,安装 react-css-modules 并配置 webpack,使能样式模块化。最后,展示了如何结合使用 less/sass 和 react-css-modules,以提升前端开发的效率和代码质量。
|
2月前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
65 2
|
2月前
|
前端开发 中间件 数据安全/隐私保护
React路由进阶方法
React路由进阶方法
39 1
|
2月前
|
JavaScript 前端开发 网络安全
vue与react路由拦截
vue与react路由拦截
53 4