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