react的导出是怎么实现的_使用React.lazy实现代码按需加载

背景

在移动互联网盛行的今天，移动终端逐步取代PC成为流量入口，在此前提下，各类App应运而生。在内容快速迭代的需求之下，以HTML5 和 JS 为主的 单页面Web(single page web application，SPA)应用得到了充分的发展，各种前端编译、打包等构件工具的发展也达到了巅峰，这其中的佼佼者要数 grunt、Browserify、 gulp 和 webpack。尤其是 webpack 目前占据主导地位，基本上是大众的首选工具。

Bundle

上段中提到的三个工具有一个共性就是通过编写各种脚本或配置对不同的资源(JS、CSS、html、Image等)进行智能解析、编译和打包，最终输出单页面所需的依赖文件。较为常见的做法是将样式和脚本文件分别输出为一个bundle文件(对各种依赖文件的整合)。

例如

应用程序：

1// app.js
2import { add } from './match.js';
3console.log(add(10, 20)); // 30
4
5// math.js
6export function add(a, b) {
    
7  return a + b;
8}

Bundle：

1function add(a, b) {
    
2  return a + b;
3}
4
5console.log(add(10, 20)); // 30

代码拆分

Bundle的做法很棒，但随着您应用程序的增长，Bundle文件也会不断增长，特别是项目中包含了大量第三方库时，将会面临极大的挑战：您应用程序的首屏加载需要花费大量的等待时间。为了避免首屏加载文件过大的困境，我们通常的做法是根据页面的结构，将脚本和样式文件做拆分，按需加载，在 Webpack和Browserify 可以利用 Code-Splitting插件进行代码拆分。代码拆分可以帮助您的应用程序加载用户当前需要的资源，可以显著提高其性能，虽然您没有减少应用程序的总代码量，但您已经避免加载用户