webpack性能优化

---

优化手段

使用最新且稳定的版本

webpack的升级与angular相识，不断地持续升级会提高性能。升级webpack、Node.js、npm等工具版本，webpack基于Node提升webpack构建性能，升级npm帮助我们更快分析包依赖。

缩小文件搜索范围

webpack构建过程中有两个重要的步骤，根据导入路径寻找相应的文件，根据文件后缀名使用对应的loader进行处理，针对以上两个过程，给出以下优化参考。

优化loader配置

loader对文件的转换操作很耗时，应在尽可能少的地方应用loader。

module.exports = {
	module: {
		rules:[
			test:/\.js$/, //精准匹配.js文件，提高正则表达式性能
			use:['babel-loader?cacheDirectory'],//缓存转译后的文件结果，提高两倍以上
			include:path.resolve(__dirname,'src'),//只对src目录下的文件采用此loader处理
			exclude:/node_modules/,//排除的文件目录，优先级高于include
		]
	}
}

优化resover.modules配置(第三方模块)

***resover.modules***用于配置webpack去哪些目录下寻找第三方模块，默认值为[‘node_modules’],含义是先去当前目录下的./node_modules目录下寻找想要的模块，如果没找到就去上一级目录…/node_modules中找。再没有就去…/…/node_modules中找。当安装的第三方模块都放在项目根目录下的./node_modules目录下时，没必要按照默认的方式去一层一层的找，可以直接指明存放第三方模块的绝对路径，减少寻找消耗，配置如下：

module.exports = {
	resolve:{
		modules:[path.resolve(__dirname,'node_modules')]
	}
}

优化resolve.extensions配置

webpack中该选项会默认匹配['.wasm','.mjs','.js','.json'],通过修改默认选项，可以快速匹配相应的文件

module.exports = {
	resolve:{
		extensions:['.ts','.js']
	}
}

优化module.noParse配置

针对一些非模块化的第三方依赖，可以使用npParse忽略对这些库文件的递归解析处理，提高构建性能。

module.exports = {
	module:{
		noParse:/lodash/,
	}
}

注意的是：被忽略的文件里面不应该有import、require、define等模块化语句，否则会导致构建出来的代码中包含无法在浏览器环境下正常执行的模块化语句。

优化图片资源的加载

使用url-loader减少http请求

url-loader中的limit参数用于设置阈值，当图片大小小于等于改值时，图片会被转化为base64URL,从而减少图片的http请求数量，但是这个也会增加项目文件的大小。当大于的时候就会使用file-loader.如果使用file-loader，每一个图片都会去请求一个http请求。

module.exports = {
	module:{
		rules:[
			{
				test:/\.(jpg|png|gif),
				use:{
					loader:'url-loader',
					options:{
						name:'[name]_hash.[ext]',
						outputPath:'images/',
						limit:10240,//小于等于10kb时转化为base64
					}
				}
			}
		]
	}
}

抽取并压缩样式文件

相当于对css代码的分割，压缩适用于线上环境，减少对带宽的消耗，开发环境下不用进行压缩。

webpack4使用mini-css-extract-plugin抽取css

将css提取到单独的文件中，它为每一个包含css的js文件创建一个css文件，为方便后面对css文件的压缩,具体用法如下：

module.exports = {
	module:{
		rules:[
			{
				test:/\.css$/,
				use:[
					{
						loader:MiniCssExtractPlugin.loader,
					},
					{
						loader:'css-loader',
						options:{
							modules:true,
						},
					},
				],
			},
		],
	},
	plugins:[
		new MiniCssExtractPlugin({
			filename:'[name].css',//直接引用
			chunkFilename:'[name].chunk.css',//间接引用
		})，
	]，
}

使用optimize-css-assets-plugin压缩css

用法如下：

module.exports={
	optimaization:{
		minimizer:[new OptimizeCssAssetsPlugin({}) ]
	}
}

optimize-css-assets-plugin可搭配SplitChunkPlugin插件对多入口的样式文件进行合并压缩。具体可以看 SplitChunkPlugin官方文档。

使用Tree-Shaking删除‘死代码’

Tree-Shaking字面意思就是“摇树”，可以理解为将树上枯萎的树叶摇落。

DCE（Dead Code Elimination）的概念

在前端领域中，Tree-Shaking的本质是，消除无用的JavaScript代码。无用代码消除DCE广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这就是DCE.

代码分割 (Code splitting)

Webpack中的代码分割方式

• entry配置通过多个入口文件实现：

module.exports={
	entry:{
		a:'./a,js',
		b:'./b.js'
	}
}

• 动态加载（按需加载）在splitChunks默认配置下通过import()动态加载异步引入
• 抽取公共代码，也是用的splitChunks配置来抽取

总结

推荐资料

• webpack一些优秀文档
• 《深入浅出 Webpack》
• 简书：浅谈webpack性能优化

更多构建工具

• 能够提升速度几十倍的esbuild
• 更轻更快更容易上手的vite（vue作者开发）