Optimize asset chunking

[jay-w-opus]

#3649
现有的解决包太大的问题的方法是把资源依赖移到了外面去了（用到了阿里的CDN）。某种程度上不是好选择，因为这样整个项目多了一个奇怪的依赖，如果没有互联网都没办法开发。而且还会需要单独设置csp来对付两个站外文件。
以下的代码如果进了“plugin.config.js”后会把相应的package或者sub package移到单独的文件。我根据现有的analyze，根据文件大小和相互之间的逻辑关联度，手动做了一个分类。虽然这样做不能减少包的总大小，但是有助于让不太经常需要的包单独成chunk（例如dataset和bizchart这种，会在带图标的页面异步加载）。

https://github.com/ant-design/ant-design-pro/pull/3650/files
现有版本（两个站外文件）：

现有版本（把站外文件拿回来）：

按建议分块：

总结：这个变化的核心思想是：

1. 把两个外链干掉，使用纯正的npm封装和依赖。
2. 把很多时候不一定要用到的包移到单独的chunk里面进行异步加载。
3. 建立一个可以给未来使用的chunk封装方法。

比较一下几个方案

	umi.js	vendors.js	total	external
Current	1.23MB	876.4KB	2.34MB	2 files
Current without External	1.23MB	1.91MB	3.39MB	0
Proposed	1.23MB	767.01KB	3.39MB	0

ref:
https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
https://webpack.js.org/plugins/split-chunks-plugin/

TODO:

• 把相关chunk改成lazy load的模式

[netlify]

Deploy preview for ant-design-pro failed.

Built with commit 6eced87

https://app.netlify.com/sites/ant-design-pro/deploys/5c7c163863327100085bda68

[netlify]

Deploy preview for ant-design-pro ready!

Built with commit 8b460fb

https://deploy-preview-3650--ant-design-pro.netlify.com

[jay-w-opus]

但是这个更改好像在dev可以工作 但是build了以后就无法加载了。有些奇怪

把chunks 从 'all' 改到了 'async',然后把icons从chunck策略中拿掉了。这样就好了。

[sorrycc]

这样打包会慢一些（因为打在 vendor 里还是会走压缩），之前做 external 的原因应该是为了提升 build 的性能吧。splitChunks 的配置目前却一个最佳实践， @yutingzhao1991 可以考虑给一个。

[yutingzhao1991]

嗯，之前做了一个 splitChunk 的调研，见 frontend9/fe9-library#242 。当前 umi 的 splitChunk 的策略个人感觉并不是最优的（如上图2，所有的 node_modules 下的内容都会打到一个 vendors.async.js 中，并没有按照页面去做 splitChunk）。

个人的想法是通过插件提供一个 splitChunk 的最佳实践，这个最佳实践可以通过配置提供一定程度的自定义选择。比如是否要 external 就可以通过一个配置自动选择，这样对于在意构建速度或者在意网络依赖两种情况下的项目就可以快速设置。

稍后我在 umi 里面单开一个 ISSUE 来具体讨论相关问题，可以再来一起具体讨论下。这个 PR 到时候可以直接提到 umi 相关插件中，pro 里面用起来也简单。

[sorrycc]

最佳实践应该不止一种，我觉得会有多种供选择。

[yutingzhao1991]

最佳实践应该不止一种，我觉得会有多种供选择。

嗯，所以应该是多个方案的集合。可以放到一个插件中通过配置来选择。

[afc163]

同意拿掉 cdn，理由：

1. 阿里 cdn 对社区和无网络环境不友好，而且不容易更新。
2. 导致现在的异步加载的代码比较复杂，容易埋坑。拿进来以后可以用标准的 React.lazy 来做。

构建慢的问题可以通过其他方式持续优化。

[jay-w-opus]

serve的时候performance应该要比build的速度更重要吧？

[jay-w-opus]

有没有办法把ant icon从umi里面移出来做异步或者懒加载呢？

[jay-w-opus]

另外，bizchart和data-set为啥看上去铁板一块呢？这样是不是都无法享受到treeshaking共享依赖库的好处了，能不能让维护者改一下？

[chenshuai2144]

umi 中的讨论看这里把
umijs/umi#2063

[jay-w-opus]

这个PR没有吧async的importing code删掉。这件事需要followup一下。 陈帅 <[email protected]>于2019年3月13日 周三下午1:48写道：

…

Merged #3650 <#3650> into master. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3650 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABr1iXvjFpQGd8PVbYJezSgR3jSyjKwUks5vWJEqgaJpZM4bbIq7> .

[chenshuai2144]

我会来做这个工作