代码分隔

我们现在大多数React项目都是以Webpack 或者 Browserify等将一堆的jsx文件组织一起,并且由一个类似index.js的入口文件串联起来的单页面web页面。

例如:


// math.js
export function add(a, b) {
return a + b;
}

App:


// app.js
import { add } from './math.js'; console.log(add(16, 26)); // 42

打完包后:


function add(a, b) {
return a + b;
} console.log(add(16, 26)); // 42

从这个例子可以看出,打完包后将所有的js都压缩到一个文件里了。随着项目越来越大,打包的文件也会越来越大,如果再引入一些第三方的js库,那就更庞大了。

接下来介绍一下如何将React代码分隔。(以下内容是16.6.0版本才支持的)

Code Splitting会帮助你的应用实现lazy load.

这么做,即使没有减少整个项目的代码量,也会避免在项目初始加载时,加载没必须的js,从而使用项目性能有所提升。

import()

最简单直接的方式就是引入动态 import 实现代码分隔。

使用 动态 import 之前:


import { add } from './math'; console.log(add(16, 26));

使用动态 import 后:


import("./math").then(math => {
console.log(math.add(16, 26));
});

注意,动态 import 并不是标准的EcmaScript,所以需要配置 babel-plugin-syntax-dynamic-import

React.lazy

React.lazy 可以以一个React标准组件的方法渲然一个动态引入的组件。

以前的做法:


import OtherComponent from './OtherComponent'; function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}

使用 React.lazy


const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}

这样在组件MyComponent渲然的时候才加载OtherComponent

React.lazy 必须使用动态 import() 引入组件,必须返回一个 Promise Component

React.lazy 目前不支持服务端渲然

Suspense

假如在 React.lazy 时,import 失败或者异常时,我们需要给于提示,或者一个默认的组件,我们就需要使用 Suspense .

例如:


const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}

fallback 也是一个组件,但不能通过 动态 import 引入的组件.

Suspense 只能包裹一个单结点,如果有多个 动态 import 的组件需要放在一个 Suspense 中时,可以使用类似 React.Fragmet 包裹一下,也可以使用其他的 React 组件包裹。例如:


const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent')); function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}

基于Router的代码分隔

基于 Router 的代码分隔,也是我们通常所说的按需加载。是我们推荐的方式。

例如:


import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react'; const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About')); const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Suspense>
</Router>
);

Named Exports

React.lazy 目前只支持 default 导出,不支持命名导出。例如,只支持:


export default () => {
return(<div>I am a Lazy component</div>);
}

如果要支持命令导出,需要重新再 export ,例如:


// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;

// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";

// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

推荐阅读 《React 手稿》

React 按需加载 - 代码分隔的更多相关文章

  1. angularJs按需加载代码(未验证)

    一网友写的AngularJs按需加载代码,但未验证,放着备用.   application.config(               function($routeProvider) {       ...

  2. react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)

    react配合webpack进行按需加载的方法很简单,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFil ...

  3. Ant Design React按需加载

    Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm install ant --save 2.引用 ...

  4. react中使用antd按需加载(第一部)

    什么是react按需加载?简单来说就是当我们引用antd的时候需要引入全局css样式,这会对性能造成一定的影响,那么使用按需加载以后就不需要引入css全局样式了,直接引入功能模块即可,既然需要设置按需 ...

  5. 前端性能优化之按需加载(React-router+webpack)

    一.什么是按需加载 和异步加载script的目的一样(异步加载script的方法),按需加载/代码切割也可以解决首屏加载的速度. 什么时候需要按需加载 如果是大文件,使用按需加载就十分合适.比如一个近 ...

  6. ant-design如果按需加载组件

    Ant Design React按需加载 Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm in ...

  7. .NET中的按需加载/延迟加载 Lazy<T>

    业务场景: 在项目开发中,经常会遇到特定的对象使用的加载问题,有的实例对象我们创建之后并非需要使用,只是根据业务场景来调用,所以可能会导致很多无效的实例加载 延迟初始化出现于.NET 4.0,主要用于 ...

  8. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  9. webpack 代码拆分,按需加载

    转自:https://segmentfault.com/a/1190000007649417?utm_source=weekly&utm_medium=email&utm_campai ...

随机推荐

  1. 如何给Apache Pig自定义UDF函数?

    近日由于工作所需,需要使用到Pig来分析线上的搜索日志数据,散仙本打算使用hive来分析的,但由于种种原因,没有用成,而Pig(pig0.12-cdh)散仙一直没有接触过,所以只能临阵磨枪了,花了两天 ...

  2. Nginx简介与基础配置

    何为Nginx? Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.最初是为了解决C10k的问题,由Igor ...

  3. 左神算法书籍《程序员代码面试指南》——2_11将单链表的每K个节点之间逆序

    [题目]给定一个单链表的头节点head,实现一个调整单链表的函数,使得每K个节点之间逆序,如果最后不够K个节点一组,则不调整最后几个节点.例如:链表:1->2->3->4->5 ...

  4. Vuejs实战项目三:退出系统功能实现

    1.创建Mockjs接口 method:post url:/user/logout 描述:退出系统 response: { "code": 2000, //状态码 "fl ...

  5. 03Redis入门指南笔记(事务、生存时间、排序、消息通知、管道)

    一:事务 1:概述 Redis中的事务(transaction)是一组命令的集合.事务同命令一样都是Redis的最小执行单位,一个事务中的命令要么都执行,要么都不执行. 事务的原理是是先将属于一个事务 ...

  6. HDU6200 mustedge mustedge mustedge

      不用看题就知道这是和什么tarjan.缩点或桥一类有关的题. 谁让他取题目叫一个mustedge还连续写3次的(哦,似乎是因为那个比赛的题目都是这个画风) 必须的边 >必须要经过的边 > ...

  7. mac vagrant 虚拟机nfs挂载点

    需求:在mac 上安装了虚拟机,虚拟机系统为centos6.5,现在希望讲虚拟机上点目录通过nfs共享给mac使用 下面主要描述通过nfs共享目录给mac调用的过程 过程参考网址: http://ww ...

  8. poj 1144 Network(割点 入门)

    Network Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 10907   Accepted: 5042 Descript ...

  9. python 字符串的处理技巧--join

    >>> '+'.join('1234')'1+2+3+4'>>> '+'.join(a for a in '1234')'1+2+3+4'>>> ...

  10. vue打包之部署在非根路径下的三两事

    首先,感叹一下,2019年已经过去一半,想想自己做了些什么,好像也没做什么. 今天试着配一个nginx,以前的nginx都是指向的/根路径,今天的nginx指向的非/根路径,遇到许多问题的,总结总结. ...