Webpack 原理与实践之如何优化 Webpack 的打包速度和构建效率

2023-02-28

模式环境配置文件

写在前面在前面文章中介绍了一些webpack配置和特性，能够提升我们的开发效率，让开发者能够有着更好的开发体验。但是，也伴随这新的问题出现，打包结果会变得越来越臃肿，因为在这个过程中Webpack为了实现这些特性，会自动往打包结果中添加一些内容。例如之前使用的SourceMap会在输出结果中添加额外

写在前面

在前面文章中介绍了一些webpack配置和特性，能够提升我们的开发效率，让开发者能够有着更好的开发体验。但是，也伴随这新的问题出现，打包结果会变得越来越臃肿，因为在这个过程中Webpack为了实现这些特性，会自动往打包结果中添加一些内容。例如之前使用的Source Map会在输出结果中添加额外的代码实现相应的功能，但是生产环境和开发环境有所差异，对于生产环境而言注重的运行效率，在开发环境注重的是开发效率。为此，wepack在4.0版本提供了module模式，方便我们在各种环境下进行不同的配置。

不同环境的配置

创建不同的环境配置的方式主要有两种：

在配置文件中添加相应的判断条件，根据环境不同导出不同配置
为不同环境单独添加一个配置文件，一个环境对应一个配置文件

//webpack.config.js  
module.exports = (env,arg)=>{ 
  //不同模式下公共配置 
  const config = { 
   
  } 
   
  if(env === "development"){ 
    //为config添加开发模式下的特殊配置 
    config.mode = "development" 
    config.devtool = "cheap-eval-module-source-map" 
  }else if(env === "production"){ 
    //为config添加生产模式下的特殊配置 
    config.mode = "production" 
    config.devtool = "nosources-source-map" 
  } 
  return config 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

通过上面的配置文件，我们可以在终端运行根据不同环境判断执行不同的配置，对于大型环境适合在不同环境条件下使用不同的配置。我们可以将公共模式的文件抽取出来，分别设置开发环境和生产环境下的模式文件。

//webpack.common.js 
module.exports = { 
  //公共配置 
} 
 
//webpack.prod.js 
const common = require("./webpack.common") 
module.exports = Object.assign(common,{ 
  //生产模式配置 
}) 
 
//webpack.dev.js 
const common = require("./webpack.common") 
module.exports = Object.assign(common,{ 
  //开发模式配置 
}) 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

对于不同环境的配置中，需要先导入公共配置文件，我们在后面对前面的属性进行覆盖，但是Object.assign会把之前的完全覆盖。对于plugins数组我们需要在原先的基础中添加配置，为此我们需要lodash的merge函数或者webpack社区的webpack-merge插件进行使用。

//webpack.common.js 
module.exports = { 
  //公共配置 
} 
 
//webpack.prod.js 
const merge = require("webpack-merge") 
const common = require("./webpack.common") 
module.exports = merge(common,{ 
  //生产模式配置 
}) 
 
//webpack.dev.js 
const merge = require("webpack-merge") 
const common = require("./webpack.common") 
module.exports = merge(common,{ 
  //开发模式配置 
}) 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

在分别配置完成过后，回到命令行终端，尝试运行webpack打包，不过因为这里已经没有默认的配置文件，所以需要通过--config参数来指定所使用的配置文件路径。

$ webpack --config webpack.prod.js 
1.

生产环境下的优化插件

在weback4中新增的production模式下，内部已经自动开启了很多通用的优化功能，对于使用者而言可以开箱即用。对于学习者而言，开箱即用会导致忽略很多需要了解的东西，以至于出现问题无从下手。

const webpack = require("webpack"); 
 
module.exports = { 
  //其他配置 
  plugins:[ 
    new webpack.DefinePlugin({ 
      API_BASE_URL:"https://api.example.com" 
    }) 
  ] 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

我们看到值要求的是一个代码片段：

const webpack = require("webpack"); 
 
module.exports = { 
  //其他配置 
  plugins:[ 
    new webpack.DefinePlugin({ 
      API_BASE_URL:JSON.stringify("https://api.example.com") 
    }) 
  ] 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.