量化webpack打包事件

• 通过speed-measure-webpack-plugin进行插件、loader等的速度测量

缩小打包范围

• 通过oneof、exclude、include缩小打包范围

去除开发阶段不需要打包配置

• loader：如postcss-loader
• babel:：开发阶段可以适当的把target调高到es2015

使用缓存

• webpack5通过cache配置开启缓存，生成.cache目录存放文件，极大得改善二次构建速度

cache:{
	type:'filesystem',
	buildDependencies:{
		config:[__filename]
	}
}
1
2
3
4
5
6

• babel缓存：

loader:"babel-loader",
options:{
	cacheDirectory:true,
	//不压缩缓存文件，进一步提升构建速度
	cacheCompression:false
}
1
2
3
4
5
6

• cache-loader:webpack4中提供的一个持久化缓存的loader

多线程打包

• thread-loader:每个worker都是一个单独有600ms限制的node进程，跨进程的上下文切换和数据传递也会存在性能消耗，建议对高开销的loader使用

{
	loader:'thread-loader',
	options:{
		worker:require("os").cpus().length-1
	}
}
1
2
3
4
5
6

devtool（sourcemap）

• 开发阶段可采用：eval-cheap-module-source-map

替换babel-loader

• 采用速度更快的esbuild-loader、swc-loader，在兼容性上swc-loader要更好