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