提升webpack打包速度的方法

1. 跟上技术的迭代

Node、Npm、Yarn、Webpack都要保持最新的版本

2. 在尽可能少的模块上应用Loader

合理的使用exclude或者include的配置，来尽量减少loader被频繁执行的频率。当loader执行频率降低时，也会提升webpack的打包速度。比如：

module: {
    rules: [{ 
      test: /\.js$/,
      include: path.resolve(__dirname, '../src'), // 只对src目录下的js文件做打包转译工作
      // exclude: /node_modules/, // 如果你的js文件在node_modules里边，就不使用babel-loader了，因为它里边的代码都是些第三方代码，已经做好了转译的工作。
      use: [{
        loader: "babel-loader"
      }]
    }]
}

3. Plugin尽可能少并确保可靠

选择性能比较好的、官方推荐的或者社区认可的插件来使用。
Plugin尽可能少的使用，减少冗余的代码分析。比如：（css代码压缩插件只在生产环境中配置，开发环境中没有必要使用）
开发环境无用插件的剔除。

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-plugin');
const prodConfig = {
  mode: 'production', // 生产环境
  optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})]
  }
} 
module.exports = prodConfig;

4. resolve参数合理配置

通过合理优化resolve配置项，让webpack打包速度更快。

resolve: { // 新增配置项（如果想在模块里引入js文件，直接可省略后缀的话）
    extensions: ['.js', '.jsx'], // 当引入一个其他目录下的模块的时候，首先会去找.js为后缀的文件，如果没有匹配到，再去找.jsx为后缀的文件
    mainFiles: ['index', 'child'], // 当引入一个目录下的内容的时候，不知道具体要引入哪个文件，那么可以通过mainFiles配置先尝试去找index文件，如果没有index,再去找child文件 
    alias: {
      child: path.resolve(__dirname, '../src/a/b/child') // 配置引入模块的别名
    }
}

extensions 配置了很多值时，那么在查找文件时，是会有性能损耗的。所以，一般我们在引入一些如js、jsx这种逻辑型文件时，我们才会把它配置到extensions的配置项里(像一些’.css’/’.png’等文件，强烈不建议配置在extensions里) 。这样我们的代码写起来也会方便些，性能方面也得到了合理的提升。
mainFiles 配置很多值时，也会影响打包性能，所以在项目开发中，要视情况而定，不要盲目的配置mainFiles项。（一般项目不用配置）
alias 当逻辑代码中引入的其他模块文件，所在层级较深时，比较适用，其他情况下，不建议使用。

5. 使用DllPlugin提升webpack打包速度

当我们的js代码里，引入第三方库 的时候，每次重新打包，都要重新分析所引入的第三方库代码，最终把他们打包到我们的项目之中。第三方库的代码都有个特点，那就是他们是不变的（不随业务逻辑变化而变化），所以我们可以把所有引入的第三方的代码都打包生成一个文件里，只在第一次打包时分析第三方代码，之后再执行打包时，直接用上次分析好的结果即可。

具体步骤如下：

我们对第三方库单独进行打包，生成一个打包文件。
使用 library 通过全局变量的形式把第三方库的所有代码暴露出去。
通过DllPlugin插件，来对我们暴露的代码做一个分析，生成一个manifest映射文件。
通过执行npm run build:dll 生成一个单独的第三方库的打包文件。（在scripts中配置）
在 webpack.common.js（公共的配置文件）文件中，引入DllReferencePlugin插件，去拿打包的映射文件。查找是否存在第三方库的映射关系。

如何结合全局变量和manifest.json映射文件进行webpack的配置？?下方的例子：

使用DllReferencePlugin和DllPlugin进行配置：
我们单独配置一个第三方库的打包文件：webpack.dll.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    vendors: ['react', 'react-dom', 'lodash']
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]', // 用DllPlugin对库进行分析
      path: path.resolve(__dirname, '../dll/[name].manifest.json') // 把库里边第三方的一些映射关系，放到name.manifest.json文件下
    }) 
  ],
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, '../dll'), // 把第三方库代码打包到dll文件夹下
    library: '[name]' // 暴露全局变量
  }
}

library 通过全局变量的形式把第三方库的所有代码暴露出去

scripts配置：package.json文件

"scripts": {
    "build": "webpack --config ./build/webpack.prod.js",
    "build:dll": "webpack --config ./build/webpack.dll.js"
}

执行打包第三方库文件：npm run build:dll

webpack.common.js中的插件配置：

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
	plugins: [
		new AddAssetHtmlWebpackPlugin({ // 为页面引入打包好的第三方库代码文件
	      filepath: path.resolve(__dirname, '../dll/vendors.dll.js')
	    }),
	    new webpack.DllReferencePlugin({ // 查找第三方库的映射关系
	      manifest:  path.resolve(__dirname, '../dll/vendors.manifest.json')
	    })
	]
}

webpack内置的DllReferencePlugin插件的作用主要是：在执行webpack打包时，对我们引入的第三方库，它会先去dll下的manifest映射文件中查找第三方模块的映射关系，如果能找到映射关系，那么它就会认为，引入的第三方库，没有必要再次进行打包了，可以直接去全局变量里拿；如果发现引入的第三放库的映射关系不在manifest映射文件里，那么它就会再从node_modules里取出该模块，然后再进行打包到我们的源代码里边。

再次打包 npm run build 我们会发现：

不配置DllReferencePlugin插件时：打包速度基本稳定在1000ms

配置DllReferencePlugin插件之后：打包速度基本稳定在600ms

实际上，在webpack配置大型复杂项目过程中，DllPlugin和DllReferencePlugin用的还是比较多的。

在webpack做打包的时候，我们就可以结合全局变量、以及我们生成的manifest映射文件，然后来对我们的源代码进行分析，一旦发现你使用的第三方库的内容是在vendors.dll.js里边，那么它就会直接使用vendors.dll.js里的内容了。就不会再去node_modules里引入我们的模块了。

6. 控制包文件大小

在我们的项目开发中，经常会引入一些没有用到的模块，引入之后，其实我们并没有使用这些模块。这个时候，如果你没有配置tree-shaking，就会导致在打包的过程中有很多冗余的代码。那么这些冗余的代码，实际上就会拖累webpack的打包速度。所以，在我们做打包的时候，对于一些冗余的代码，我们可以通过 tree-shaking(查看详解) 把它去除掉。（或者直接不去引用它）这样我们就可以控制webpack打包生成文件的大小，从而提升打包速度。

也可以通过splitChunksPlugin插件，对代码进行拆分，把一个大的文件，拆分成几个小的文件，做webpack的打包处理，这样也可以提高webpack的打包速度。

7. thread-loader, parallel-webpack, happypack 多进程打包

webpack默认是基于node.js来运行的，所以它是一个单进程的打包过程。我们也可以借助webpack里的多进程来帮我们提升打包速度
如：thread-loader, parallel-webpack, happypack 多进程打包。
他们可以利于node中的多进程，同时利用多个cpu进行打包，具体需要开几个cpu进行打包速度是最快的，对其他应用影响是最小的，要根据项目实际情况，多做几次尝试来做一个权衡。

8. 合理使用 sourceMap(查看详解)

9. 结合stats.json文件分析打包结果

10. 开发环境内存编译

webpack-dev-server做打包的时候不会生成dist目录，而是会把打包生成的文件放到内存里，那么内存的读取，肯定要比硬盘的读取要快的多，所以采用这种手段，也会让我们在开发的过程中webpack打包的性能得到很大的提升。

另外，提升webpack打包速度的方式还有很多，比如：一些loader会提供一些参数，帮助我们去提升它的打包速度。

知识补充

我们对webpack.dll.js文件里的entry再做一个变更：（对打包的dll文件做拆分）

entry: {
    vendors: ['lodash'],
    react: ['react', 'react-dom'] // 让react、react-dom库的代码打包到文件名为react的文件里
}

在webpack公共配置文件中多配置一份插件：

单独打包第三方库代码：（执行打包）

npm  run  build:dll

此时的dll目录如下：

再次执行打包：

npm  run  dev

页面显示正常，react、vendors也可以正常访问。

如果在大型项目中，对dll文件做拆分比较多的话，这样会导致在webpack公共的配置文件里，重复实例化多个相同的插件，下边分享个更好的方法：

通过node来分析dll目录下究竟有几个dll文件和manifest文件，然后动态的往plugins里添加AddAssetHtmlWebpackPlugin和DllReferencePlugin。

const path = require('path'); // 引入node的path模块（loader模块）
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const webpack = require('webpack');

// 创建一个插件数组
const plugins = [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }), 
  new CleanWebpackPlugin()
]

// 使用fs读取dll目录下的文件
const files = fs.readdirSync(path.resolve(__dirname, '../dll'));
// 对获取到的所有文件进行循环
files.forEach(file => {
  if(/.*\.dll.js/) { // 如果是以.dll.js结尾的文件，就以走AddAssetHtmlWebpackPlugin插件
    plugins.push(
      new AddAssetHtmlWebpackPlugin({ // 为页面引入打包好的第三方库代码文件
        filepath: path.resolve(__dirname, '../dll', file)
      })
    )
  }
  if(/.*\.manifest.json/) { // 如果是以.manifest.json结尾的文件，就走DllReferencePlugin插件
    plugins.push( 
      new webpack.DllReferencePlugin({ 
        manifest:  path.resolve(__dirname, '../dll', file)
      })
    )
  }
})

module.exports = {
  entry: {
    main: './src/index.js'
  },
  resolve: { // 新增配置项（如果想在模块里引入js文件，直接可省略后缀的话）
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [{
      test: /\.jsx?$/, // 这里代表既匹配js文件，也匹配jsx文件
      include: path.resolve(__dirname, '../src'), // 只对src目录下的js文件做打包转译工作
      // exclude: /node_modules/, // 如果你的js文件在node_modules里边，就不使用babel-loader了，因为它里边的代码都是些第三方代码，已经做好了转译的工作。
      use: [{
        loader: "babel-loader"
      }]
    }]
  },
  plugins, // 插件配置项
  optimization: { 
    splitChunks: { // 有默认配置项 
      chunks: "all" // 不管是同步还是异步，都进行代码分割 
    }
  },
  output: {
    filename: '[name].js', // 打包之后的输出文件
    path: path.resolve(__dirname, '../dist') 
  }
}