index 文件太大了，请问应该怎么优化呢？

[herrdu]

你好：
index文件有点大，本地看有 2m多，web加载的时候有7m多。我正在做CommonsChunkPlugin，想请问作者有没有好的建议，怎么去做这个CommonsChunkPlugin？

[superlbr]

不能只看index.js,要整体来看（来个知乎风格的解答，先问是不是，再说为什么）：
先放结论，index.js本地2m多，不大，很迷你，不需要优化。

1. 为什么2MB不大？
   因为dist里面的index.js还可以压缩。什么？dist里的js不是已经压缩过了么，我明明用了minify呀，webpack已经配置了呀？这是因为js压缩后文件格式还是js，换个压缩文件格式？明白了吗，js还可以再压缩的，浏览器可以解压gzip。dist的大小并不是实际上线的效果，再说一次。。。
   index.js是必须加载的，但是压缩一下估计也就4百多k这样吧。(吐槽下。400k也就一张轮播大图)。Webpack直接打包index.js确实大，虽然压缩后不大，但是js加载时间延长了，但是对于后台来说，这个加载时间确实没人介意，毕竟不是移动端首屏很严苛。
2. 什么是gzip？
   度娘，一般部署到线上，都带压缩的（比如nginx开gzip之类）
3. 那2MB里包含什么，这么大，可以精简吗？
   按照antd-admin的配置 yarn build --analyze , 会列出所有的js文件gzip后的大小，注意看（见下图）。
   注意：这里的index.js实际文件大小有1.5MB（已经minify了）。
   另外再看里面stats.html. 基本上都是依赖包比较大。可能看到总共7.3m，依赖包5.8m, 自己代码才1.5m这样子.依赖包基本上moment、antd、lodash啥的占了大头，精简余地不大，可以拆分index.js但是又不加鸡腿。。。
   什么？你说build时间太长了，minify的时间长，yarn build --debug就快很多，当然文件大小也很感人。
4. 那还可以做什么减少dist后的大小？
   按照antd-admin的配置router.js里面有动态加载的，这样下来首页差不多7百k左右，效果如下图，对于PC首页来说，简直迷你。（注意index.js实际1.5MB, 也就是你们说的大文件，但是经过gzip压缩只有397KB，只需要传输397KB）
   
   上图中还可以看到使用了h2（http2协议)，阿里云CDN默认支持，当然自己也可以配。
   另外 .roadhogrc.js里，可以在 "libraryName": "antd", 的下面加一行 "libraryDirectory": "es",
   antd@3.0 已经支持tree shaking了。效果不是很明显，dist少了200k的样子
   还是对CommonsChunkPlugin 念念不忘？好吧，右转支持 vendor 的配置 sorrycc/roadhog#370

[herrdu]

谢谢你的回复。

1. 我执行 NODE_ENV='production' && roadhog build --analyze ，并没有生成 stats.html
2. 我的index文件 压缩后是1.8m左右

3.我使用的webpack的dll 功能，虽然build成功了，但是npm start 之后，却显示webpackJosn.name not defined。

4. 是不是roadhog 不支持 webpack 的dll ？

[herrdu]

我想打开是我引用的图片过多了，我去要把图片拷贝过去。

[superlbr]

@herrdu 重新更新了答案，我觉得antd-admin的配置无可厚非。

[Maple-Ro]

@superlbr @zuiidea
大家能看下我的，为啥500kb的js文件，下载时间需要3s多（zuiidea的demo网站才不到500ms）
服务器端nginx做了gzip压缩，阿里云服务器

不知道我哪里没配置好呢，谢谢大家

[superlbr]

估计服务器的带宽是1-2M，三点可以优化，1. 负载均衡 2. CDN 3. 加宽带

[Maple-Ro]

@superlbr，非常感谢。嗯，服务器带宽是1M的。