ant design pro (八)构建和发布
一、概述
原文地址:https://pro.ant.design/docs/deploy-cn
二、详细
2.1、构建
当项目开发完毕,只需要运行一行命令就可以打包你的应用:
npm run build
由于 Ant Design Pro 底层使用的 roadhog 工具,已经将复杂的流程封装完毕,对于大部分场景,构建打包文件只需要一个命令 roadhog build
,构建打包成功之后,会在根目录生成 dist
文件夹,里面就是构建打包好的文件,通常是 ***.js
、***.css
、index.html
等静态文件。
不过你如果需要自定义构建,比如指定 dist
目录等,则需要通过 .webpackrc
进行配置,详情参看:roadhog 配置。
2.1.1、环境变量
当你需要区别开发和部署以及测试环境的时候,可以通过在 .webpackrc
中设置 env 环境变量来实现。
"env": {
// 开发环境
"development": {
"extraBabelPlugins": [
"dva-hmr",
]
},
// build 时的生产环境
"production": {
"extraBabelPlugins": [
"transform-runtime",
"transform-decorators-legacy",
["import", { "libraryName": "antd", "style": true }]
]
}
},
2.1.2、分析构建文件体积
如果你的构建文件很大,你可以通过 analyze
命令构建并分析依赖模块的体积分布,从而优化你的代码。
npm run analyze
然后打开 dist/stats.html
查看体积分布数据。
2.2、发布
对于发布来讲,只需要将最终生成的静态文件,也就是通常情况下 dist
文件夹的静态文件发布到你的 cdn 或者静态服务器即可,需要注意的是其中的 index.html
通常会是你后台服务的入口页面,在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。
2.2.1、代码分割和动态加载
0.3.0 版本之后,我们支持了代码分割和动态加载,只有进入对应路由后才会加载相应的代码,避免首屏加载过多不必要的 JS 文件,提高大规模前端应用研发的扩展性。
├── 0.async.js
├── 1.async.js
├── 10.async.js
├── 11.async.js
├── 12.async.js
├── 13.async.js
├── 14.async.js ...
注意:如果开启了 hash
,会变成 0.2df975b2.async.js
的形式,修改代码后 hash 会变化,可以避免前端缓存问题。
这种方式对于部署有一定的要求,你可以将 dist 整体部署到你的后端应用的静态资源目录下(通常为 static 或者 public),这样默认的静态资源引用路径直接指向应用的根目录 //your.application.domain/***.js
和 //your.application.domain/***.css
。
如果你的静态资源域名和应用域名不同(例如独立的 cdn 地址),你需要在 .webpackrc
文件里用 publicPath 对生产环境的静态路径进行配置。可以参考 create-react-app 的部署文档
{
"publicPath": "https://cdn.com/your_app"
}
Ant Design Pro 1.0 版本后我们 .webpackrc
里使用了 "disableDynamicImport": true
默认关掉了动态加载(roadhog@2.x 支持),回退为单文件 index.js 和 index.css 的构建方式。如果需要动态加载删掉这个配置即可。
2.2.2、前端路由与服务端的结合
Ant Design Pro 中,前端路由使用的是 React Router,所以你可以选择两种路由方式:browserHistory
和 hashHistory
。
hashHistory
使用如 https://cdn.com/#/users/123
这样的 URL,取井号后面的字符作为路径。browserHistory
则直接使用 https://cdn.com/users/123
这样的 URL。使用 hashHistory
时浏览器访问到的始终都是根目录下 index.html
。使用 browserHistory
则需要服务器做好处理 URL 的准备,处理应用启动最初的 /
这样的请求应该没问题,但当用户来回跳转并在 /users/123
刷新时,服务器就会收到来自 /users/123
的请求,这时你需要配置服务器能处理这个 URL 返回正确的 index.html
。如果你能控制服务端,我们推荐使用 browserHistory
。
express 的例子
app.use(express.static(path.join(__dirname, 'build'))); app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
egg 的例子
// controller
exports.index = function* () {
yield this.render('App.jsx', {
context: {
user: this.session.user,
},
});
}; // router
app.get('home', '/*', 'home.index');
2.2.3、在 Ant Design Pro 中使用前端路由
路由包含的信息在 router.js
中,不过关于 history
的配置是在 index.js
入口文件中,传入配置信息给 dva 构造器即可。
由于使用了 react-router@4
,所以引入 browserHistory
与原本 dva
的方式相比有所改变。
import dva from 'dva';
// 引入 browserHistory
import browserHistory from 'history/createBrowserHistory'
import models from './models'; import './index.less'; // use browserHistory
const app = dva({
history: browserHistory(),
}); // default hashHistroy
const app = dva();
关于路由更多可以参看 React Router 。 关于 react-router@4
更多可以参看 All About React Router 4 。
ant design pro (八)构建和发布的更多相关文章
- 阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
- 使用ant design pro搭建项目
脚手架搭建 git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project 然后 cd my-proje ...
- Ant Design Pro (中后台系统)教程
一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么: https://www.cnblogs ...
- ant design pro (十一)advanced Mock 和联调
一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...
- Ant Design Pro快速入门
在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功 ...
- ant design pro超详细入门教程
1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架 ...
- ant design pro 当中改变ant design 组件的样式和 数据管理
ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...
- Ant Design Pro 学习笔记:数据流向
在讲这个问题之前,有一个问题应当讲一下: Ant Design Pro / umi / dva 是什么关系? 首先是 umi / dva 的关系. umi 是一个基于路由的 react 开发框架. d ...
- Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/in ...
随机推荐
- Codeforces 990G 点分治+暴力
题意:给出一棵点带权的树,求i\(\in\)[1,200000]所有路径的上点权的gcd==i的个数. 考虑点分治,对于一棵以u为根的子树,如何统计经过u的路径的答案? 显然既然是经过点u的路径,那么 ...
- HDU 6071 Lazy Running(最短路)
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6071 [题目大意] 给出四个点1,2,3,4,1和2,2和3,3和4,4和1 之间有路相连, 现在 ...
- 用ExifInterface读取经纬度的时候遇到的一个问题
如果读取图片经纬度,使用 String latValue = exifInterface.getAttribute(ExifInterface.TAG_GPS_LATITUDE); String ln ...
- 1.6(SQL学习笔记)存储过程
一.什么事存储过程 可以将存储过程看做是一组完成某个特定功能的SQL语句的集合. 例如有一个转账功能(A向B转账50),先将账户A中金额扣除50,然后将账户B中金额添加50. 那么我们可以定义一个名为 ...
- [转]Java 对象锁-synchronized()与线程的状态与生命周期
线程的状态与生命周期 Java 对象锁-synchronized() ? 1 2 3 4 synchronized(someObject){ //对象锁 } 对象锁的使用说明: 1.对象锁的返 ...
- 1036: [ZJOI2008]树的统计Count (树链剖分)
1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3401 Solved: 1418[Submit] ...
- 【PHP内存泄漏案例】PHP对象递归引用造成内存泄漏
[案例一] 作者:老王 如果PHP对象存在递归引用,就会出现内存泄漏.这个Bug在PHP里已经存在很久很久了,先让我们来重现这个Bug,代码如下: <?php class Foo { funct ...
- 树状数组求第K小值 (spoj227 Ordering the Soldiers && hdu2852 KiKi's K-Number)
题目:http://www.spoj.com/problems/ORDERS/ and pid=2852">http://acm.hdu.edu.cn/showproblem.php? ...
- android——根据MVC框架设计的结构
- Java并发教程(Oracle官方资料)
计算机的使用者一直以为他们的计算机可以同时做很多事情.他们认为当其他的应用程序在下载文件,管理打印队列或者缓冲音频的时候他们可以继续在文字处理程序上工作.甚至对于单个应用程序,他们任然期待它能在在同一 ...