这是一个创建于 3553 天前的主题，其中的信息可能已经有所发展或是发生改变。
我在项目中用到以下库
- vue ， vuex ， vue-router ， vue-resource
- jquery
- lodash
- moment
- materialize
压缩打包后有 700+kb 大小
这科学么？不知道各位打包后的情况怎么样？
我也想问问如何判断 webpack 打包出来到底合不合理？
13 条回复 2017-08-08 23:23:48 +08:00
 | 1 leojoy710 2016-03-09 10:37:08 +08:00 https://github.com/robertknight/webpack-bundle-size-analyzer 随手一搜... 而且这些个东西加起来也差不多这么大吧... materialize 都有近 300... |
 | 2 zkd8907 2016-03-09 10:46:42 +08:00 webpack 打包以后应该也只会加上一小部分__webpack_require__相关的方法，大头估计还是引用的库。 700+kb 如果在 PC 上的话还好，手机上的话只能做下 gzip+缓存。如果有上 spdy 或者 http/2 的话，可以考虑用 webpack 的 require.ensure ，把模块拆成独立的小文件。 |
 | 3 ChefIsAwesome 2016-03-09 10:59:11 +08:00 700 是 uglify 之前还是之后的。如果是之前的， uglify 一下应该能少一半，再 gzip 下又能少很多。 手机淘宝站首页没 gzip 前是 366kb 。你这还是 spa ， 700 多很正常。 |
 | 4 fszaer OP |
 | 5 guchengf 2016-03-09 11:14:05 +08:00 其实你的依赖库不一定要用 webpack 打包，托管在 CDN 上，一般来说效果会更好 |
| 6 ChefIsAwesome 2016-03-09 11:19:30 +08:00 @fszaer 作为 spa 可以接受吧，非要用那几个库也没什么办法。现在能做的是想办法弄障眼法， js 加载好之前先弄点等待条， splash screen 之类的糊弄一下。 |
 | 7 rokeyzki 2016-03-09 11:23:35 +08:00 第三方依赖库不建议用 webpack 打包，一般只打包自己的代码 托管在 CDN 一来可以规避浏览器对同域名下并发连接数的限制，二来也有利于 CDN304 读取缓存，三来也缩减 webpack 打包出来文件的体积 |
| 8 fszaer OP @rokeyzki @ChefIsAwesome 看来分离第三方库是势在必行了 @leojoy710 用了这个分析我终于发现大头在哪里了 不是 materialize ，不是 jquery 而是 moment 准确来说应该是 moment 的 locales ，这货压缩后也还有将近 200kb ，里面各种语言的本地化处理，居然这么重....... 我还以为一个时间处理库大不到哪里去..... |
 | 10 hanyang 2016-03-09 14:27:08 +08:00 |
| 11 fszaer OP @hanyang 其实这样意义不大，因为这一个就要 195kb 无非是调用 webpack 去压缩，还是直接调用 min 的区别，我估计不会差太多 locales 里面包括了各种英德意法日韩 barbar ，而目前来说，我其实只需要原生的英语，最多加一个中文吧。 其实最好的方法是只打包你要的 locales ，跟 moment 的核心，而不是将全部压缩进去 moment.min.js 只有 41.8kb ，如果加上一个中文支持撑死也就 50kb 相差三倍的大小，还是满可观的 |
 | 12 KuroNekoFan 2016-03-09 17:51:18 +08:00 固定的 lib 直接用网页引入得了，没必要在打到 build 里，要把 302 有效利用起来嘛 |
 | 13 jeffjade 2017-08-08 23:23:48 +08:00 |
Select Language