Webpack构建性能优化

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情

引言

项目已经上线一段时间了会有一些零碎的升级迭代，随着项目越来越庞大了
运维大哥抱怨每次生产环境前端项目build时间太长，今天整理了一些优化步骤记录分享。

项目背景

其实目前我们搭建的脚手架功能是比较丰富的，该考虑的优化都考虑到了，包括：

• mode；
• js、tsx、vue、文件解析时优化( include| exclude)
• chunkhash输出
• devtool
• 别名及externalsCDN外链引入
• optimization 压缩优化
• 文件压缩 mini-css-extract-plugin
• 分包

生产环境配置不详，打包构建大概是花费了8w毫秒，下面我们一起来看下优化步骤。

优化步骤

出于稳妥，考虑的是"打补丁"的方式来覆盖，通过新增一些配置在外围对webpack编译进行修正。
基础的优化不在这里赘述，只记录新增优化内容，核心就是开启多线程

解析js开启多线程

解析js文件使用 happypack 开启多线程

const HappyPack = require('happypack')
// 获取当前机器cpu内核数
const cpus = require('os').cpus().length
const happyThreadPool = HappyPack.ThreadPool({ size:cpus })

module.exports = {
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'happypack/loader?id=babel'
				}
			}
		]
	},
	plugins: [
		new HappyPack({
			id: 'babel',
			threadPool: happyThreadPool,
			loaders: [
				{
					loader: 'babel-loader',
					options: {
						cacheDirectory: true,
						presets: ['@babel/preset-env']
					}
				}
			]
		})
	],
}

优化前	优化后

optimization压缩配置插件TerserPlugin 开启缓存及多线程

module.exports = {
	optimization: {
		minimize: true,
		minimizer: [
			new TerserPlugin({
				terserOptions: {
					cache: true,
					parallel: true
				}
			})
		]
	},
}

ESLint多线程

构建工具我们支持了eslint语法规则校验检查，运行、构建项目时也会有开销，通过开启多线程提升速度

const ESLintPlugin = require('eslint-webpack-plugin')

new ESLintPlugin({
	context: path.resolve(__dirname, '../src'),
	exclude: 'node_modules',
	cache: true,
	threads: true
}),

webpack.performance 性能配置提示

hints

string = 'warning': 'error' | 'warning' boolean: false

打开/关闭提示。此外，当找到提示时，告诉 webpack 抛出一个错误或警告。此属性默认设置为 "warning"。

module.exports = {
	performance: {
		// 打开/关闭提示
		hints: false,
		// 入口起点的最大体积，这个参数代表入口加载时候最大体积，将其改为了1M，
		maxEntrypointSize: 1000000,
		// 此选项根据单个资源体积，控制 webpack 何时生成性能提示，自己将其改成了1M
		maxAssetSize: 1000000,
		// 属性允许 webpack 控制用于计算性能提示的文件，通过覆盖原有属性，将其改成只对js文件进行性能测试。
		assetFilter: function (assetFilename) {
			return assetFilename.endsWith('.js')
		}
	}
}

Vue解析优化

项目中解析vue，当然会使用vue-loader，现有项目配置是老版本的参数配置,直接移除即可。

module.exports = {
	module:{
		rules:[
			{
				test: /\.vue$/,
				exclude: /node_modules/,
				// use: [
				// 	{
				// 		loader: 'vue-loader',
				// 		options: {
				// 			compilerOptions: {
				// 				compatConfig: {
				// 					MODE: 2
				// 				}
				// 			}
				// 		}
				// 	}
				// ],
				use: ['vue-loader']
			}
		]
	}
}

下面是优化前后打包速度对比

优化前	优化后

缓存

本地build来讲开启缓存比不开启缓存速度提升1-10s左右，影响目前看不是很大。

module.exports = {
	cache:true
}

false	true

总结

上面测试机器配置：11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz 2.80 GHz 16GB运行内存
经过一番埋头苦干(zhe teng)，打包速度从90000ms提升到了40000ms左右，结果还是喜人的，速度提升了一倍有木有 0.0，只不过可能需要运维大哥升级对应环境的nodejs版本到V17+了。