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

做者：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 更快

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 有着很是大的性能提高。

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的整个构建过程当中，有多个地方提供了缓存的机会，若是咱们打开了这些缓存，会大大加速咱们的构建