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 。