【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记（三）

【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记（三）

前言：前一篇记录了【后台管理系统】目前进展开发中遇到的一些应用点，这一篇会梳理一些自己学习Ant Design Pro源码的功能点。附：Ant Design Pro 在线预览地址。 

---

Dashboard指示板

pages/Dashboard 目录下：Analysis.js分析页、Monitor.js指控页、WorkPlace.js工作台

用到的一些技术点：react v16.6 动态 import，React.lazy()、Suspense、Error boundaries （来源：Postbird博客）

 

Ⅰ、动态 import

在 Code-Splitting 部分，提出拆分组件的最佳方式（best way） 是使用动态的 import 方式。

比如下面两种使用方式的对比：

之前：

import { add } from './math';

console.log(add(16, 26));

之后：　　

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

可以发现动态 import 提供了 Promise 规范的 API，比如 .then()，关于 ES 动态 import，可以查看下面链接：　　

• https://hospodarets.com/native-ecmascript-modules-dynamic-import#importscriptsurls-alternative

同样，下面这篇文章上也可以参考：

• https://www.jianshu.com/p/386916c73dad

目前动态 import 仍旧是 ECMAScript 的提案，并没有纳入规范，不过既然 react 能够大力的推进，应该下个标准会被写入。可以查看 TC39-https://github.com/tc39/proposal-dynamic-import

动态 import 主要用于延迟请求，对于组件我觉得没什么太大的用处，但是对于延迟加载方法或者bundle非常有用，比如下面的代码：

可以发现，当触发点击事件的时候，才会去引入需要的方法或者是对象，并且由于 Promise API 的特性，可以使用 Promise.all Promise.race 这种 API，进行并行加载，然后在 then() 回调中调用方法，非常方便