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

写在前面

在前面文章中介绍了一些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 
}

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

//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,{ 
  //开发模式配置 
})

对于不同环境的配置中，需要先导入公共配置文件，我们在后面对前面的属性进行覆盖，但是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,{ 
  //开发模式配置 
})

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

$ webpack --config webpack.prod.js

生产环境下的优化插件

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

const webpack = require("webpack"); 
 
module.exports = { 
  //其他配置 
  plugins:[ 
    new webpack.DefinePlugin({ 
      API_BASE_URL:"https://api.example.com" 
    }) 
  ] 
}

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

const webpack = require("webpack"); 
 
module.exports = { 
  //其他配置 
  plugins:[ 
    new webpack.DefinePlugin({ 
      API_BASE_URL:JSON.stringify("https://api.example.com") 
    }) 
  ] 
}

参考文章

《webpack原理与实践》

《webpack中文文档》

写在最后

本文介绍了如何在webpack添加不同环境的配置文件，以及在生产模式打包时经常用到的几个插件。我们可以针对生产环境下的打包进行优化，能够提升生产环境的运行效率。