谈谈SPA打包优化

[codering]

最近用开发了个项目，用到工具及库为
roadhog1.x + antd2.x + dva1.x + moment + react15.x

按照dva给的demo目录结构，利用react-router + require.ensure 进行路由页面级拆分，结果打包出来的js会非常大，不算gzip，基本都是300k ~ 1M 左右。

然后我对做了如下修改后就有非常大的变化,除了最大的公共依赖在1M左右， 基本都在几十K左右：

• 将index.html改成index.ejs, 并去除手动引入的index.js, 让roadhog自动引入所有entry模块

 ...
 <div id="root"></div>
- <script src="index.js"></script>
 ...

• 修改index.js

 ...
- import './index.html'
 ...

• 在src目录添加vendor.js, 把一些公用的模块都引用下(我项目中antd几乎所有组件都在用)

+ import 'es6-promise';
+ import 'react';
+ import 'react-dom';
+ import 'prop-types';
+ import 'react-router';
+ 
+ // moment还有大量locales文件，待优化
+ import 'moment';
+ 
+ import 'dva';
+ 
+ //  抽取antd组件及样式
+ import 'antd/lib/table'
+ import 'antd/lib/table/style'
+ 
+ import 'antd/lib/select'
+ import 'antd/lib/select/style'
+ 
+ import 'antd/lib/date-picker'
+ import 'antd/lib/date-picker/style'
+ 
+ import 'antd/lib/calendar'
+ import 'antd/lib/calendar/style'
+ 
+ import 'antd/lib/form'
+ import 'antd/lib/form/style'
+ 
+ import 'antd/lib/transfer'
+ import 'antd/lib/transfer/style'
+ 
+ import 'antd/lib/modal'
+ import 'antd/lib/modal/style'
+ 
+ import 'antd/lib/input'
+ import 'antd/lib/input/style'
+ 
+ import 'antd/lib/tabs'
+ import 'antd/lib/tabs/style'
+ 
+ import 'antd/lib/tooltip'
+ import 'antd/lib/tooltip/style'
+ 
+ import 'antd/lib/upload'
+ import 'antd/lib/upload/style'
+ 
+ import 'antd/lib/popconfirm'
+ import 'antd/lib/popconfirm/style'
+ 
+ import 'antd/lib/layout'
+ import 'antd/lib/layout/style'
+ 
+ import 'antd/lib/row'
+ import 'antd/lib/row/style'
+ 
+ import 'antd/lib/col'
+ import 'antd/lib/col/style'
+ 
+ import 'antd/lib/switch'
+ import 'antd/lib/switch/style'
+ 
+ import 'antd/lib/collapse'
+ import 'antd/lib/collapse/style'
+ 
+ import 'antd/lib/card'
+ import 'antd/lib/card/style'
+ 
+ import 'antd/lib/steps'
+ import 'antd/lib/steps/style'
+ 
+ import 'antd/lib/tree'
+ import 'antd/lib/tree/style'
+ 
+ import 'antd/lib/cascader'
+ import 'antd/lib/cascader/style'
+ 
+ import 'antd/lib/tag'
+ import 'antd/lib/tag/style'
+ 
+ // 下面这种方式居然不行。。。应该是这个js没被依赖，无法走babel-plugin-import解析
+ // import {Table, Select, DatePicker, Calendar, Form, Transfer, Modal, 
+ //     Input, Tooltip, Upload, Layout, Row, Col, Tabs, Popconfirm, Menu, message, Dropdown } from 'antd'

• 修改.roadhogrc.js

module.exports = {
- "entry": "./src/index.js",
+ "multipage": true,
+ "entry": {
+     "app": "./src/index.js",
+     "common": "./src/vendor.js",
+ }
  "disableCSSModules": true,  // 禁用css modules
  "theme": {
    ....
    ....
}

问： 你们是怎么打包优化的？

[sorrycc]

import antd from 'antd';
const {Table, Select, DatePicker, Calendar, Form, Transfer, Modal, 
     Input, Tooltip, Upload, Layout, Row, Col, Tabs, Popconfirm, Menu, message, Dropdown } = antd;

试试这样。

[codering]

@sorrycc 试过了，好像不行

[LuciferLi]

+ "entry": {
+     "app": "./src/index.js",
+     "common": "./src/vendor.js",
+ }

entry type should be string, but got object

[codering]

@LuciferLi 请升级roadhog到最新版

[huyawei]

@codering vendor.js 里面导入了公共组件，外面怎么引用呢

[codering]

@huyawei vendor里只是声明哪些是公共需要打包在一起，外面原来该怎么用就怎么用

[sage-z]

@codering 这种是生产时的配置，开发时 npm run start 报错？ ’ roadhog is not defined‘ ，“(0 , _dva2.default) is not a function” ，我是直接把roadhog 从0.6.0 升级到了 1.2.2

已解决，将 dllPlugin 改成xdllPlugin

[canisminor1990]

每次build, common的hash都会变

[SquirrelJimmy]

@codering 我参考了这里的 支持 vendor 的配置 #370 ,并且参考下vue-cli的打包配置,公共的vendor不算gzip也是1M左右,关于路由懒加载分离有什么好的优化方案么?

[520Yanxiaofei]

打包后确实所有页面size减少了很多
但是现在有一个common文件1.19M过大，这个该如何分解，有什么好的建议吗？

[codering]

@520Yanxiaofei 这个大小再配合gzip，是可以接受的。
话说现在roadhog v2 可以配置多个common模块，可以看看能不能升级

[520Yanxiaofei]

@codering 好的，感谢你的回复，现在才知道元旦出了2.0版本，看了下文档，改进挺多。因重点项目维护不敢升级，只能部分改动。等下一期再进行roadhog 2升级，打包再试试看。祝你新年快乐，哈哈

[vipcxj]

好像2.0不再支持multipage了层主的优化貌似搞不定了

[codering]

@vipcxj 嗯，2.0变化大，但我看支持commons配置了，效果是一样的。

另外，我感觉 roadhog 要被 https://github.com/umijs/umi 替代，因为 @sorrycc 的重心不在roadhog了。

[PatWu16]

@codering 请问你那边打包出来的公共模块文件的hash会变化吗？即使没有修改文件的前提下！