webpack打包性能分析

1. 如何定位webpack打包速度慢的原因

首先需要定位webpack打包速度慢的原因，才能因地制宜采取合适的方案，我们可以在终端输入：

webpack --profile --json > stats.json

然后将输出的json文件上传到如下2个网站进行分析

http://alexkuz.github.io/webpack-chart/

https://github.com/webpack/analyse

 关于性能优化，这篇文章写的比较全面：

http://hao.jser.com/archive/13592/

cli

http://webpack.github.io/docs/cli.html#progress

webpack打包优化

https://zhuanlan.zhihu.com/p/25212283

?

1 2 3 4

作者：trigkit4 链接：https://zhuanlan.zhihu.com/p/25212283 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1.减小打包文件体积

2.代码压缩

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
     }
   }
 })

3.happypack

happypack 的原理是让loader可以多进程去处理文件，原理如图示：

http://taobaofed.org/blog/2016/12/08/happypack-source-code-analysis/

https://github.com/amireh/happypack/blob/master/examples/webpack2-extract-react/webpack.config.js

此外，happypack同时还利用缓存来使得rebuild 更快

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

var HappyPack = require('happypack'),   os = require('os'),   happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });   modules: {     loaders: [       {         test: /\.js|jsx$/,         loader: 'HappyPack/loader?id=jsHappy',         exclude: /node_modules/       }     ] }   plugins: [     new HappyPack({       id: 'jsHappy',       cache: true,       threadPool: happyThreadPool,       loaders: [{         path: 'babel',         query: {           cacheDirectory: '.webpack_cache',           presets: [             'es2015',             'react'           ]         }       }]     }),     //如果有单独提取css文件的话     new HappyPack({       id: 'lessHappy',       loaders: ['style','css' ,'less']     })   ]

　　

4.缓存与增量构建

由于项目中主要使用的是react.js和es6，结合webpack的babel-loader加载器进行编译，每次重新构建都需要重新编译一次，我们可以针对这个进行增量构建，而不需要每次都全量构建。

babel-loader可以缓存处理过的模块，对于没有修改过的文件不会再重新编译，cacheDirectory有着2倍以上的速度提升，这对于rebuild 有着非常大的性能提升。

?

1 2 3 4 5 6 7 8 9 10 11

var node_modules = path.resolve(__dirname, 'node_modules'); var pathToReact = path.resolve(node_modules, 'react/react'); var pathToReactDOM = path.resolve(node_modules,'react-dom/index');   {         test: /\.js|jsx$/,         include: path.join(__dirname, 'src'),         exclude: /node_modules/,         loaders: ['react-hot','babel-loader?cacheDirectory' ],         noParse: [pathToReact,pathToReactDOM] }

　　

babel-loader让除了node_modules目录下的js文件都支持es6语法，注意exclude: /node_modules/很重要，否则 babel 可能会把node_modules中所有模块都用 babel 编译一遍!当然，你还需要一个像这样的.babelrc文件，配置如下：

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}

这是一劳永逸的做法，何乐而不为呢？除此之外，我们还可以使用webpack自带的cache，以缓存生成的模块和chunks以提高多个增量构建的性能。

在webpack的整个构建过程中，有多个地方提供了缓存的机会，如果我们打开了这些缓存，会大大加速我们的构建