如何判断的 webpack 打包大小是否科学，是否还有优化的可能？

[fszaer]

我在项目中用到以下库

• vue ， vuex ， vue-router ， vue-resource
• jquery
• lodash
• moment
• materialize

压缩打包后有 700+kb 大小

这科学么？不知道各位打包后的情况怎么样？
我也想问问如何判断 webpack 打包出来到底合不合理？

[leojoy710]

https://github.com/robertknight/webpack-bundle-size-analyzer

随手一搜...

而且这些个东西加起来也差不多这么大吧... materialize 都有近 300...

[zkd8907]

webpack 打包以后应该也只会加上一小部分__webpack_require__相关的方法，大头估计还是引用的库。 700+kb 如果在 PC 上的话还好，手机上的话只能做下 gzip+缓存。如果有上 spdy 或者 http/2 的话，可以考虑用 webpack 的 require.ensure ，把模块拆成独立的小文件。

[ChefIsAwesome]

700 是 uglify 之前还是之后的。如果是之前的， uglify 一下应该能少一半，再 gzip 下又能少很多。
手机淘宝站首页没 gzip 前是 366kb 。你这还是 spa ， 700 多很正常。

[fszaer]

@ChefIsAwesome
uglify 之前是 2.2mb......=。=
看来这还是比较正常的？

[guchengf]

其实你的依赖库不一定要用 webpack 打包，托管在 CDN 上，一般来说效果会更好

[ChefIsAwesome]

@fszaer 作为 spa 可以接受吧，非要用那几个库也没什么办法。现在能做的是想办法弄障眼法， js 加载好之前先弄点等待条， splash screen 之类的糊弄一下。

[rokeyzki]

第三方依赖库不建议用 webpack 打包，一般只打包自己的代码

托管在 CDN 一来可以规避浏览器对同域名下并发连接数的限制，二来也有利于 CDN304 读取缓存，三来也缩减 webpack 打包出来文件的体积

[fszaer]

@rokeyzki
@ChefIsAwesome
看来分离第三方库是势在必行了
@leojoy710
用了这个分析我终于发现大头在哪里了
不是 materialize ，不是 jquery
而是 moment
准确来说应该是 moment 的 locales ，这货压缩后也还有将近 200kb ，里面各种语言的本地化处理，居然这么重.......
我还以为一个时间处理库大不到哪里去.....

[gouflv]

@fszaer moment 的 locales 可以在 webpack 里面过滤掉

[hanyang]

@fszaer 可以这样配置一下 用别名

resolve: {
alias: {
moment: "moment/min/moment-with-locales.min.js"
}
}

[fszaer]

@hanyang
其实这样意义不大，因为这一个就要 195kb
无非是调用 webpack 去压缩，还是直接调用 min 的区别，我估计不会差太多
locales 里面包括了各种英德意法日韩 barbar ，而目前来说，我其实只需要原生的英语，最多加一个中文吧。
其实最好的方法是只打包你要的 locales ，跟 moment 的核心，而不是将全部压缩进去
moment.min.js 只有 41.8kb ，如果加上一个中文支持撑死也就 50kb
相差三倍的大小，还是满可观的

[KuroNekoFan]

固定的 lib 直接用网页引入得了，没必要在打到 build 里，要把 302 有效利用起来嘛

[jeffjade]

http://www.jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/