React build 包优化的问题

#1

最近做的一个项目是 antd + react + router + mobx ，也算很基础的技术栈了。一开始build 出来的js 包很大，因为一开始也没考虑按照路由切分bundle 包。所以有2M多，没想太多就把静态文件部署到服务器上去了。服务器带宽很低只有 1M ，网页能够正常打开，但是需要加载20 多秒 :joy:。。。

我觉得很不科学啊，虽然带宽是很低，但是好歹是静态文件，我觉得服务器带宽1M，但是打开网页是将服务器的文件下载到pc本地，下载速度应该跟pc的带宽一致的吧。。。。（虽然肯定不是，不然也不用cdn了）

但是之前用vue写项目bundle包最大的时候 1M多 快2M， 也没考虑太多直接就放服务器上去了，但是加载速度远比现在20多秒快得多。想问，这是什么原因。。。

之后，对于react的这个项目打包做了一定的优化，路由懒加载搞起来，发现其实，antd 以及 mobx 包也蛮大的。我就是想问，大家都是怎么做的？ 感觉你们部署在线上的项目浏览加载还蛮快的

#2

调试工具可以看时间花在什么地方, 是等到还是传输, 没有特别多经验不好说.

没有什么好办法, 如果有人力和资源, 把公用类库拆到 CDN, 把 antd 替换成自己开发的或者二次开发的轻型组件库, 可能效果会好, 但是那个时间成本开发成本还是非常高的.

#3

我司使用的是antd + router + redux + react，路由切分，静态资源上CDN，antd按需加载，提取公共文件，加载速度上没有问题

#4

感谢大神~ 之前未经过优化的时候，network中查看是 js bundle包请求占用了很大的时间。后来经过拆分，通常每一个小的js块 大小在100k 左右，网页的加载速度快乐不少。

#5

嗯嗯~ 感谢~ 想问你司上cdn的静态文件是仅仅只有 img 等资源 还是会把公共部分的js部分也上传cdn的？

#6

图片/字体/所有js文件

#7

把你的NetWork截图看看

#8

2M多，是不是加了sourceMap啊