一次优化webpack打包的经历

最新推荐文章于 2024-09-05 21:43:04 发布

置顶

xiyang5678

最新推荐文章于 2024-09-05 21:43:04 发布

阅读量4.2k

点赞数

分类专栏： webpac 文章标签： webpack

本文链接：https://blog.csdn.net/xiyang5678/article/details/70231399

版权

本文记录了一次优化webpack打包过程的经历，从480s降至40s。通过dll打包、happypack和ExtractTextPlugin优化loader，最后在解决addtional asset processing停滞问题时，尝试了GitHub上的优化方法，成功大幅缩短了打包时间。

摘要由CSDN通过智能技术生成

起因

如题，有个项目每次打包时间均有480s左右，之前忙于业务开发，无暇修复，小组成员深受其害。今天，分配了时间着手解决一下。

过程

打开收藏夹的一篇webpack优化教程，按步进行优化。
依次使用了

dll打包第三方npm包
happypack优化loader

happypack的readme更新不够及时，在找 ExtractTextPlugin 使用方法着实费了功夫
其中happypack 和 ExtractTextPlugin 抽取css共同使用的方法请参考这里

挫折

经历上步优化，打包时间稳定在了410s左右…
好像也没什么区别

转机

灵机一动，死马当活马医，将webpack打包时停滞时间最长的提示 addtional asset processing 直接googe，然后将查到的所有网页的解决方案都试一试，然后在尝试某一篇github上发现的一个优化方法时

webpack提供的UglifyJS插件由于采用单线程压缩，速度很慢 ,
webpack-parallel-uglify-plugin插件可以并行运行UglifyJS插件，这可以有效减少构建时间，当然，该插件应用于生产环境而非开发环境，配置如下：

var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
   cacheDir: '.cache/',
   uglifyJS:{
     output: {
       comments: false
     },
     compress: {
       warnings: false
     }
   }
 })

打包时间瞬间就降低到40s！！！！！感谢万能的谷歌！！

总结

打包配置最终如下

//--webpack.config.js
// 一些通用的库
var webpack = require('webpack');
var path = require('path');
var url = require('url');
var webpackHotDevServer = require('webpack-dev-server');

// 用到的插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var WebpackBrowserPlugin = require('webpack-browser-plugin');
var HappyPack = require('happypack');//多线程loader 加快编译速度
var os = require('os');
var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
var ParallelUglifyPlugin = require('webpack-parallel-uglify-p