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的整個構建過程中，有多個地方提供了緩存的機會，如果我們打開了這些緩存，會大大加速我們的構建