webpack优化之翻倍提高你的构建效率

项目构建分析以及具体方法

1.项目构建分析工具

1.速度分析工具 speed-measure-webpack-plugin，可以看到每个loader和插件的耗时

2.体积分析工具 webpack-bundle-analyzer ，可以看到打包的文件大小

通过分析工具，就可以准确地知道我们构建的瓶颈在哪里。

2.文件的打包

这一块可以优化的，除去我们现脚手架里面已有的配置。可以从 预编译dll的方式 来减小构建包的大小以及利用缓存来提高二次构建速度)。

对比图：可以看到速度快了接近8倍(221s => 28s)

其次还可以使用多进程多实例的方式提高构建效率。
使用 thread-loader （https://webpack.docschina.org/loaders/thread-loader/）或者happy-pack（https://www.npmjs.com/package/happypack）实现,都比较简单，所以就直接贴上官方文档地址了。

3.依赖包的下载

这一块因为已经通过对一部分比较慢的包设置淘宝镜像源，所以一般项目下载依赖，时间都不是特别长。像这样`

    npm set registry https://r.npm.taobao.org && \
    yarn config set registry https://npm.taobao.org && \
    yarn config set disturl https://npm.taobao.org/dist && \
    yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass && \
    yarn config set electron_mirror https://npm.taobao.org/mirrors/electron && \
    yarn config set puppeteer_download_host https://npm.taobao.org/mirrors && \
    yarn config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver && \
    yarn config set operadriver_cdnurl https://npm.taobao.org/mirrors/operadriver && \
    yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs && \
    yarn config set selenium_cdnurl https://npm.taobao.org/mirrors/selenium && \
    yarn config set node_inspector_cdnurl https://npm.taobao.org/mirrors/node-inspector`

但是还是会遇到下载某一些二进制的包很慢的情况，如项目中会有一个image-webpack-loader的包，会特别慢（对于image-webpack-loader这个包慢的原因是因为cwebp-bin这个二进制包很慢导致的,通过查看这个包的源码，没有发现可以注册包镜像的api。个人的想法是使用imagemin这个包来替换原有的image-webpack-loader，之前的包下载很慢是由于需要科学上网导致，这个包没有这个问题，故下载速度上没有问题），因为我们一般不会使用本地图片，都是加载的阿里云上的图片，所以删除了这个包，速度快了接近6倍(127s => 22s)。（ps.如果大家发现自己项目也有类似的下载包特别慢，欢迎拿出来讨论）

对比图