Ant-design-pro: Ant Pro 2.0 用UMI 打包后umi.js 和 vendors.async.js 文件超大，应如何拆分？

Created on 5 Sep 2018 · 13Comments · Source: ant-design/ant-design-pro

如上图中，umi.js 和 vendors.async.js 超大，应如何进行拆分，比如里面的ant-desgin 、ant、g2这个要如何拆出来？我在config.js externals里已剔除@antv/data-set这种单个js的，求教这些文件夹下多项的应如何处理？

🤩Discussion

Source

panshiyu

All 13 comments

Translation of this issue:

Ant Pro 2.0 After migrating with UMI, the umi.js and vendors.async.js files are oversized, how should they be split?

As shown above, umi.js and vendors.async.js are oversized. How to split them, such as how to remove ant-desgin, ant, g2? I have removed the single js of @antv/data-set in config.js externals. How can I handle multiple of these folders?

ant-design-bot on 5 Sep 2018

👍1

g2使用了 bizchart，你可以将 bizchart 走 cdn。

script = [
  'https://gw.alipayobjects.com/os/lib/react/16.4.2/umd/react.production.min.js',
  'https://gw.alipayobjects.com/os/lib/react-dom/16.4.2/umd/react-dom.production.min.js',
  'https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.5/dist/g2.min.js',
  'https://gw.alipayobjects.com/os/antv/assets/g2-plugin-slider/2.0.3/g2-plugin-slider.js',
 'https://cdn.jsdelivr.net/npm/[email protected]/umd/BizCharts.min.js',
],
externals = {
  '@antv/g2': 'G2',
  '@antv/data-set': 'DataSet',
  react: 'React',
  bizcharts: 'BizCharts',
  'react-dom': 'ReactDOM',
};

这是我的实践，希望可以帮到你。

chenshuai2144 on 5 Sep 2018

嗯，单条的js我是这么剔除的，但里面最大的两个文件是@ant-design 和 @ant ，这两个有什么办法吗？

panshiyu on 5 Sep 2018

看一下https://github.com/ant-design/ant-design-pro-site
这个把 antd 都上了 cdn。但是这些没了，应该不会很大了

chenshuai2144 on 5 Sep 2018

关于打包策略的一点思考：比较1.0，2.0的打包总体积是小的，模块间重复都归集到了一处，但导致单个js动不动就几M，路由分片的js才几k。做单页应用的时候，首次加载文件太大了，比如bizChart，首次加载完全没必要，我点到要用的页面才加载，是否可根据路由的模块要求，按需加载第三方插件（公用的模块都分片，然后根据路由调用需要的）这个在打包策略上是否还有改进的空间，待讨论

panshiyu on 5 Sep 2018

@ant-design/icons确实太大了，而且单页面会首屏加载，我的项目甚至只引用了antd/Button一个组件结果整个项目要首屏加载800多k的@ant-design/icons，1.0好像并没有这个问题

Fuphoenixes on 7 Sep 2018

想请问下，最后有解决这个问题嘛？

MollyQu on 6 Dec 2018

gzip 和 externals

chenshuai2144 on 6 Dec 2018

👍1

好的，十分感谢

MollyQu on 6 Dec 2018

@chenshuai2144 想请教一下umi这个文件太大了怎么解决

wenmine on 29 Mar 2019

👀2 😕2

请问umi这个走CDN怎么走啊？？？

beevivo6 on 5 May 2019

g2使用了 bizchart，你可以将 bizchart 走 cdn。
script = [
  'https://gw.alipayobjects.com/os/lib/react/16.4.2/umd/react.production.min.js',
  'https://gw.alipayobjects.com/os/lib/react-dom/16.4.2/umd/react-dom.production.min.js',
  'https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.5/dist/g2.min.js',
  'https://gw.alipayobjects.com/os/antv/assets/g2-plugin-slider/2.0.3/g2-plugin-slider.js',
 'https://cdn.jsdelivr.net/npm/[email protected]/umd/BizCharts.min.js',
],
externals = {
  '@antv/g2': 'G2',
  '@antv/data-set': 'DataSet',
  react: 'React',
  bizcharts: 'BizCharts',
  'react-dom': 'ReactDOM',
};
这是我的实践，希望可以帮到你。
这个方法还需要在package.json中配置相关的依赖嘛？把package.json中的配置去掉打包就失败了。
ant design pro 版本 2.1.1