ant design pro （八）构建和发布

1、概述

原文地址：https://pro.ant.design/docs/deploy-cn

2、详细

2.一、构建

当项目开发完毕，只须要运行一行命令就能够打包你的应用：

npm run build

因为 Ant Design Pro 底层使用的 roadhog 工具，已经将复杂的流程封装完毕，对于大部分场景，构建打包文件只须要一个命令 roadhog build，构建打包成功以后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，一般是 ***.js、***.css、index.html 等静态文件。

不过你若是须要自定义构建，好比指定 dist 目录等，则须要经过 .webpackrc 进行配置，详情参看：roadhog 配置。

2.1.一、环境变量

当你须要区别开发和部署以及测试环境的时候，能够经过在 .webpackrc 中设置 env 环境变量来实现。

"env": {
  // 开发环境
  "development": {
    "extraBabelPlugins": [
      "dva-hmr",
    ]
  },
  // build 时的生产环境
  "production": {
    "extraBabelPlugins": [
      "transform-runtime",
      "transform-decorators-legacy",
      ["import", { "libraryName": "antd", "style": true }]
    ]
  }
},

2.1.二、分析构建文件体积

若是你的构建文件很大，你能够经过 analyze 命令构建并分析依赖模块的体积分布，从而优化你的代码。

npm run analyze

而后打开 dist/stats.html 查看体积分布数据。

2.二、发布

对于发布来说，只须要将最终生成的静态文件，也就是一般状况下 dist 文件夹的静态文件发布到你的 cdn 或者静态服务器便可，须要注意的是其中的 index.html 一般会是你后台服务的入口页面，在肯定了 js 和 css 的静态以后可能须要改变页面的引入路径。

2.2.一、代码分割和动态加载

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.二、前端路由与服务端的结合

　　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.三、在 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 。