前端框架（react+umi+dva+ant design pro ）攻克: 三、umi 知识点

一、Next.js介绍

   由于umi借鉴了Next.js的很多思想，为了进一步了解umi，所以这章先介绍一下Next.js，从而帮助初学者入门umi。

(一）我们构建一个web应用程序是，需要处理以下一些工作量：

         1.必须找到一个打包程序，例如webpack打包代码，同时要用Babel等编译器进行代码转换.

          2.针对生产环境进行一些优化，例如拆分代码。

         3. 为了提升页面的渲染速度，你需要预先渲染页面或者采用SEO,最好除了支持客户端渲染，还要能支持服务端渲染。

        4.你需要编写一些服务端代码将React的应用连接到数据库或其它存储。

    以上的工作量，Next.js均能完成，所以它是一个很好的解决方案。

（二）Next.js的主要功能有哪些：

        1.直观基于页面的路由，且支持动态路由。

         2.预渲染支持，支持页面级的静态生成和服务端的渲染。

        3.代码自动拆化，提升页面加载速度。

        4.内置css和sass，并支持任何的css-in-js库

         5.开发环境支持快速刷新。

         6. 利用serverless functions和api路由构建api功能。

  （三）Next.js的路由功能方案，采用了约定多的路径配法法，它不需要路由库，只需要页面按一定的路径与文件命名规则进行组织，页面内部通过标签实现页面之间的跳转。

  （四）Next.js中有关于页面布局的定义规范，也有如何引入静态图片，文件等，以及全局样式表的定义方法等。

   （五）Next.js的预渲染机制：即不需要js支持，提前生成了html文件，大大提升的页面性能。

           不用预渲染时，一定是通过客户端的Javascript填充频繁更新页面上的数据，这种叫客户端渲染。

           1. 静态生成（分为有数据和无数据生成）：构建时就生成好了每个html文件, 这个速度比服务端渲染快，如果每次请求它都需要频繁更新数据，那这个方案不适合，应改用服务端预渲染。

           2.服务端渲染生成：在每个请求上生成html

    （六）动态路由支持：pages/posts/[id].js

二、umi是什么？为什么用它？

    umi中文叫乌米，它是蚂蚁金服提供的类似Next.js的一个前端应用框架技术，对它的理解要从以下几个方面深入思考：

    1.核心是支持路由，支持配置式路由和约定路由（约定就是不需要路由库，完全通过页面的目录与命名规则生成路由）。

     2.代码的构建、部署等工作，umi自己提供一套插件集或者插件来完成，这些插件它会生成umi的临时目录及文件，通过这些临时文件完成代码的构建工作，这些临时目录是整个umi工程的发动机，它定义了入口，路由等内容。这些临时目录与文件不需提交到git仓库中，每次启动umi时会删除重新生成。

三、如何创建一个umi的应用程序？

（一）开发环境搭建：node10.13或以上版本，推荐用yarn来管理npm依赖，并使用国内源（阿里用户内网源）

      1.安装node10.13

       2.安装yarn 并配置阿里内网源

      3.创建umi脚手架工程，这个可以省略，直接下载ant design pro脚手架即可，最新的它缺省用的就是umi脚手架应用框架,。umirc.ts中定义了布局、权限、国际化、dva等功能。

      4.启动项目，即开发环境下启动$yarn start

    

（二）部署发布代码：

     1.构建：$ yarn build

     2.本地验证：$ yarn global add serve  $ serve ./dist

     3.部署：最终把dist目录部署到nginx服务器的html目录下即可。

四、理解umi前端应用框架，最重要就是理解它生成的脚手架，即脚手架中各个目录及文件的作用：

1.package.json内容： 前端的依赖包声明，包括umi相关插件包，npm install后自动下载到node-module目录中。

2.  .umirc.ts  umi的配置文件，定义的umi内置功能和相关插件配置参数。

3.   .env 定义的环境变量，例如端口等.

4. dist 目录： umi build执行后生成的最终发行的代码。

5.  mock目录:  开发模拟数据.

6.  /src  目录：

     .umi目录:  临时文件目录，入口文件，路由定义等，这个目录不要提交到git服务器，每次umi dev和umi build时会被删除并重新生成。

     layouts/index.tsx:  约定式路由时的全局布局文件。

    pages目录：  所有路由组件放在这个父目录下面。

    app.ts:   运行时的配置文件，可以在这里扩展运行时的能力，ts即typescript的扩展名js。

 

五、umi的相关知识点（即如何用好umi？）：

1. .umirc.ts和config/cofig.ts的配置用法，以及.umirc.local.ts的配置用法？多环境配置用法？

2. src/app.tsx 用配置用法？

3. 配置式路由是如何定义的？

4. 约定式路由是如何定义的？

5. umi的命令有哪些？

6.umi 如何引用样式和资源文件

7. 按需加载如何配置？

六、总结：

   先看一下基本上内容，有一个印象即可，具体细节配置时再查手册，当开发项目时，慢慢就熟悉了，毕竟ant design pro本身弄好了完整的脚手架。