react如何控制全局loading_如何做产物优化

相信很多人都有遇到这个问题，为什么 umi 打包完的产物这么大啊？首屏打开时间也太长了吧？特别是用 umi 开发移动端的同学，我们暂且认为首屏开启时间在 3s 内作为合格，5s 内勉强能接受。因为我们去年一年使用 umi 作为移动端的开发，是借助 cordova 将构建产物直接写在本地，所以包的大小对于我们的项目影响较小。但是今年开始有不少的同学将产物以 H5 的形式对外发布，或者以链接的形式，在其他应用中使用 webview 加载出来。于是包大小，首屏打开时间，就成为了我们项目的一个交互指标。

这里我用一个被用户投诉的项目来做演示说明。当然只会展示产物信息，不会涉及任何用户的敏感信息。

这里我们先看一下优化后的结果(同一个电脑同一个网络环境中)。

比对项目	原始数据	优化后的数据
dist 大小	8.7MB	4.5MB
Fast 3G	20s	16.94s
Online	4.3s	503ms

默认打包

使用 umi 执行打包，不增加任何修改和配置的情况下，所有的 js 代码会被编译到 umi.js 文件中。

umi build

dist 8.7MB 编译时间 21.02s

包名	Stat Size	Parsed Size	Gzip Size
all	6.77MB	2.75MB	905.54KB
umi.js	6.77MB	2.75MB	905.54KB

增加按需加载

觉得都打到一个文件 umi.js 里面文件太大的话，可以考虑在 config/config 中添加按需加载配置。

export default {
      dynamicImport: {
      },};

页面切换的时候，会有一个默认的 loading ，觉得不是很好看，自己可以修改一下。

export default {
      dynamicImport: {
        // @ 默认指到 src 目录    loading: '@/pages/Loading/index',  },};

dist 18.7MB 编译时间 33.68s

包名	Stat Size	Parsed Size	Gzip Size
all	39.16MB	10.76MB	3.05MB
umijs.js	3.29MB	1.44MB	454.97KB

添加完按需加载，每次在切换页面的时候，都会先走一个 loading 页面，看惯了原生应用的甲方说，不能接受。

这里可以很明显的发现开启按