在框架层面解剖Ant-design-Pro

最近团队开始使用Ant-design-Pro，在已经能够熟练使用的基础上，对Ant-design-Pro的框架结构进行剖析。本文旨在让读者能够在架构层面认知Ant-design-Pro，不做任何技术实现层面上的教学。

下面，我们先看下官方的解析图。

1-1

官方的架构图对于初学者来说，可能会有点晃眼。下面，就官方的架构图结合代码和我们自己编写的结构图，我们来看下。

2-1

其实，AntP最核心的基础框架是UMI，那umi是集构建、路由、性能优化与一体的框架。

1.构建，提供dev-开发构建、build-发布构建、test-单元测试、generate-查看配置

2.基础umi-core（主要处理引用路径、用户自定义配置信息）的基础上，umi集成H5路由历史基础库History，如图3-1，以及集成react-router基础库和react-router-dom.

3-1

4-1

3.umi具体支持插件可插拔，支持引入第三方插件，这里面官方提高两个插件分别是：

    ①umi-plugins-react，支持webpack的动态引入、dll功能（webpack打包优化），浏览器兼容性（polyfills）、pwa、dva等。这里值得一提的是，umi里面并没有提供状态管理的解决方案，正是通过集成插件dva来完成状态管理。dva是由redux和redux-saga组成，相信大家对redux很熟悉了，那么redux-saga是什么东西呢，我们用react-redux，两者区别就是promise和generate的区别，saga使用generate实现，对于异步请求和状态管理，可以用同步的写法来完成。

②umijs/plugin-prerender，这个是完成SSR，支持服务器端渲染的，这个不多说。

4.上图提到UI辅助，个人认为是这套ant-design-pro响应式渲染UI壳子。

至此，基本的框架组成就是这些了，如果想要深入了解每个细节，可以关注笔者的后续文章，后续将针对每个部分做详解。