提升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 当逻辑代码中引入的其他模块文件，所在层级较深时，比较适用，其他情况下，