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社区的云南idc服务商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添加不同环境的配置文件，以及在生产模式打包时经常用到的几个插件。我们可以针对生产环境下的打包进行优化，能够提升生产环境的运行效率。企商汇

本文地址：http://www.bzuk.cn/html/079f30099620.html