支付宝框架UmiJs（五米）_极快的类 Next.js 的 React 应用框架
最近有发现了一套dva过后的新的react应用框架--UmiJs（当然也可叫做“优米”或者“五米”），
网址：https://umijs.org/zh-Hans/
github地址：https://github.com/umijs/umi
不知道，对UmiJs这套框架有所了解的小伙伴们，对这套框架有什么看法呢？请留言哦！
也是刚刚了解这套框架，那么废话少说我们来切入主题吧。umi 就是一套零配置，按最佳实践进行开发的前端框架。
UmiJs特性：
1、高性能
PWA、按需加载、tree-shake、scope-hoist、智能提取公共文件、Critical css、preload、hash build、preact 等等，并且，你相同的代码会随着 umi 的改进而不断提升性能。
2、开箱即用
你只需一个依赖 umi 就可启动开发，而无需安装 react、preact、react-router、eslint、babel、jest 等。
3、多端
一键切换单页和多页，一份代码同时部署到 cdn、容器、云凤蝶等环境，详见部署文档。
4、扩展性
umi 的整个生命周期都是插件化的，甚至就是由大量插件组成，比如 http mock、service worker、layout、高清方案等，都是一个个的插件。
UmiJs开发体验
基于 create-react-app 实现更多体验上的优化，比如按需编译（不管有项目多大启动时间都不超过 10s）、dev server 断线重连、配置的校验、自动生效以及提示到行等。
UmiJs的使用：
安装方法：
用 npm 安装 umi ：
npm i umi -g或者用 yarn ：
yarn global add umi然后可以 umi -v 检查版本号：
umi -v
umi@1.0.0创建应用：
创建应用并进入。
mkdir myapp
cd myapp启动 dev 服务器：
umi dev
Compiled successfully!
You can now view Your App in the browser.
Local: http://localhost:8000/
Note that the development build is not optimized.
To create a production build, use npm run build.创建我们第一个umi页面：
在 pages 目录里新建首页。
echo 'export default () => <div>Index Page</div>' > pages/index.js如果你是 Window 系统，可以手动新建 pages/index.js，并填入：
export default () => <div>Index Page</div>;然后在浏览器中打开 http://localhost:8000/，你会看到 Index Page 。
构建应用：
umi build
Compiled successfully.
File sizes after gzip:
52.09 KB static/umi.2b7e5e82.js
186 B static/__common-umi.6a75ebe1.async.js构建产物会生成在 dist 目录：
tree ./dist
dist
├── index.html
└── static
├── __common-umi.6a75ebe1.async.js
└── umi.2b7e5e82.js
1 directory, 3 files部署：
npm i serve -g
cd dist
serve
Serving!
- Local: http://localhost:5000
- On Your Network: http://{Your IP}:5000
Copied local address to clipboard!这样UmiJS就可以算是上手了。
我们来看一下umi的目录结构：
.
├── dist/ // 构建产物目录
└── src/ // 源码目录，可选，把里面的内容直接移到外面即可
├── layouts/
│ └── index.js // 全局布局
├── pages/ // 页面目录，里面的文件即路由
├── .umi/ // dev 临时目录，需添加到 .gitignore
├── .umi-production/ // build 临时目录，会自动删除
├── document.ejs // HTML 模板
├── 404.js // 404 页面
├── page1.js // 页面 1，任意命名
└── page2.js // 页面 2，任意命名
├── global.css // 约定的全局样式文件，自动引入，也可以用 global.less
├── _routes.json // 路由配置，和文件路由二选一
├── test/ // 测试用例放这里
├── .umirc.js // umi 配置
├── .webpackrc // webpack 配置
└── package.json一定要记得pages目录是强约定目录哦。小伙伴，有什么要说的呢？谈一下，大家对支付宝这套新出框架“五米”的感想吧？
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
