1. 写在前面
如果你掌握了基础的webpack配置，那么你肯定会思考：这些配置能不能进一步优化，提高webpack的编译效率呢？在这篇文章中，就跟大家介绍几种webpack的优化配置项。
2. 使用 noParse 属性进行优化
我们在项目中安装第三方包的时候，这些包里面可能会有一些其他的依赖包。如此一来，webpack在打包编译的时候，还会解析这些第三方包里面有没有其他的一些依赖，会占用一定的资源，打包效率也会变得比较低。
对于一些第三方包，我们非常清楚里面没有依赖其他的包，这个时候就不需要webpack进行深度解析，可以节省时间。但是webpack不知道哪些包需要解析，哪些不需要，所以需要我们通过 noParse 属性来告诉它。具体的配置可以参考以下实例：
比如我们项目中使用了 jquery ，我们知道这个包里面没有依赖其他的一些包，webpack在打包编译的时候，不需要解析jquery中有没有其他的一些依赖。这样，我们可以使用noParse进行如下配置：
module.exports = {
module: {
noParse: /jquery/ // 使用正则表达式进行匹配
}
}
这样一来，webpack在打包编译的时候，就不会去解析jquery内部的依赖，从而达到提高效率的目的。
3. 通过 exclude 和 include 属性进行优化
在webpack中配置对 .js 文件的配置规则的时候，webpack默认会将项目中所有的 .js 文件都进行打包编译，不仅包括我们自己编写的业务逻辑代码文件，还有可能包括安装的一些依赖包中的文件。这显然不是我们想要的，对于依赖包中的文件代码，我们是不需要进行webpack打包编译的。
这个时候，我们就可以使用 exclude 和 include 属性，在配置处理规则的时候，指定范围。使得webpack只对范围内的代码文件进行处理。比如以下两种配置方法：
module.exports = {
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'eslint-loader',
},
exclude: /node_modules/ // 排除 node_modules 中的文件，不对其做处理
}]
}
}
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtract.loader,
'css-loader',
'postcss-loader'
],
include: path.resolve(__dirname, 'src') // 指定范围，只对src下的文件做处理
}]
}
}
使用这两个属性进行优化，可以排除不必要的文件编译工作，提高效率。一般情况下，这两个属性，我们使用其中的一个就可以。
4. 使用 IgnorePlugin 插件进行优化
一些项目中的依赖包，它的内部有很多其他依赖。比如对于 moment 这个包来讲，它在内部引入了很多语言包来支持不同国家的语言，但是我们在开发过程中，可能只需要使用中文或者英文语言，这个时候只需要引入一个语言包就可以了。
但是这个包在编译的时候，会引入全部的语言包，这对于webpack来讲，是一个负担。不仅会增加编译时候的压力，而且打包编译之后的文件，还会非常大。
所以我们就需要在webpack中进行配置，针对特定的第三方包，忽略其中的一些依赖包，减轻编译的压力和编译后文件的大小。
想要实现这种效果，可以借助webpack的内置插件 IgnorePlugin。比如我们想要忽略moment包中的local文件夹中的一些依赖包，可以这样定义：
module.exports = {
plugins: [
new webpack.IgnorePlugin(/\.\/locale/, /moment/)
]
}
IgnorePlugin() 中有两个参数，第二个参数是我们在项目中使用的包，第一个参数是这个依赖包中，被忽略的其他依赖包。配置完成之后，webpack在编译的时候，只会引入moment的其他代码和依赖，不会引入 ./local 文件夹中的依赖包了。
5. 写在最后
webpack的优化方法还有很多，以上这几个优化项，只是自己在学习过程中遇到的一些选项。希望对于一些刚刚掌握webpack使用的同学，有一些帮助。
网友评论