• type: 入门
  • 构建
    • 环境变量
    • 分析构建文件体积
  • 发布
    • 代码分割和动态加载
    • 前端路由与服务端的结合
    • 在 Ant Design Pro 中使用前端路由

    order: 8
    title: 构建和发布

    type: 入门

    构建

    当项目开发完毕,只需要运行一行命令就可以打包你的应用:

    1. $ npm run build

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

    不过你如果需要自定义构建,比如指定 dist 目录等,则需要通过 .webpackrc 进行配置,详情参看:roadhog 配置。

    环境变量

    当你需要区别开发和部署以及测试环境的时候,可以通过在 .webpackrc 中设置 env 环境变量来实现。

    1. "env": {
    2. // 开发环境
    3. "development": {
    4. "extraBabelPlugins": [
    5. "dva-hmr",
    6. ]
    7. },
    8. // build 时的生产环境
    9. "production": {
    10. "extraBabelPlugins": [
    11. "transform-runtime",
    12. "transform-decorators-legacy",
    13. ["import", { "libraryName": "antd", "style": true }]
    14. ]
    15. }
    16. },

    分析构建文件体积

    如果你的构建文件很大,你可以通过 analyze 命令构建并分析依赖模块的体积分布,从而优化你的代码。

    1. $ npm run analyze

    构建和发布 - 图1

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

    构建和发布 - 图2

    发布

    对于发布来讲,只需要将最终生成的静态文件,也就是通常情况下 dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可,需要注意的是其中的 index.html 通常会是你后台服务的入口页面,在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。

    代码分割和动态加载

    0.3.0 版本之后,我们支持了代码分割和动态加载,只有进入对应路由后才会加载相应的代码,避免首屏加载过多不必要的 JS 文件,提高大规模前端应用研发的扩展性。

    1. ├── 0.async.js
    2. ├── 1.async.js
    3. ├── 10.async.js
    4. ├── 11.async.js
    5. ├── 12.async.js
    6. ├── 13.async.js
    7. ├── 14.async.js
    8. ...

    如果开启了 hash,会变成 0.2df975b2.async.js 的形式,修改代码后 hash 会变化,可以避免前端缓存问题。

    这种方式对于部署有一定的要求,你可以将 dist 整体部署到你的后端应用的静态资源目录下(通常为 static 或者 public),这样默认的静态资源引用路径直接指向应用的根目录 //your.application.domain/***.js//your.application.domain/***.css

    如果你的静态资源域名和应用域名不同(例如独立的 cdn 地址),你需要在 .webpackrc 文件里用 publicPath 对生产环境的静态路径进行配置。可以参考 create-react-app 的部署文档

    1. {
    2. "publicPath": "https://cdn.com/your_app"
    3. }

    Ant Design Pro 1.0 版本后我们 .webpackrc 里使用了 "disableDynamicImport": true 默认关掉了动态加载(roadhog@2.x 支持),回退为单文件 index.js 和 index.css 的构建方式。如果需要动态加载删掉这个配置即可。

    前端路由与服务端的结合

    Ant Design Pro 中,前端路由使用的是 React Router,所以你可以选择两种路由方式:browserHistoryhashHistory

    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 的例子

    1. app.use(express.static(path.join(__dirname, 'build')));
    2. app.get('/*', function (req, res) {
    3. res.sendFile(path.join(__dirname, 'build', 'index.html'));
    4. });

    egg 的例子

    1. // controller
    2. exports.index = function* () {
    3. yield this.render('App.jsx', {
    4. context: {
    5. user: this.session.user,
    6. },
    7. });
    8. };
    9. // router
    10. app.get('home', '/*', 'home.index');

    在 Ant Design Pro 中使用前端路由

    路由包含的信息在 router.js 中,不过关于 history 的配置是在 index.js 入口文件中,传入配置信息给 dva 构造器即可。

    由于使用了 react-router@4,所以引入 browserHistory 与原本 dva 的方式相比有所改变。

    1. import dva from 'dva';
    2. // 引入 browserHistory
    3. import browserHistory from 'history/createBrowserHistory'
    4. import models from './models';
    5. import './index.less';
    6. // use browserHistory
    7. const app = dva({
    8. history: browserHistory(),
    9. });
    10. // default hashHistroy
    11. const app = dva();

    关于路由更多可以参看 React Router 。
    关于 react-router@4 更多可以参看 All About React Router 4 。