分析构建性能

分析构建各阶段耗时

如果你想知道构建各阶段的耗时来进行性能优化，那么你可以用speed-measure-webpack-plugin这个插件。

speed-measure-webpack-plugin使用起来和其他webpack插件有所不同：需要先实例化，然后用它的wrap方法包裹配置对象。

import SpeedMeasurePlugin from "speed-measure-webpack-plugin";
const smp = new SpeedMeasurePlugin();

const config = { // ...}  // 配置对象
smp.wrap(config);

然后执行打包命令，打包的时候会输出各阶段耗时，例如loader转换耗时，html-webpack-plugin插件执行耗时等。

bundle体积监控和分析

webpack-bundle-analyzer是一个 plugin 和 CLI 工具，它使用交互式可缩放树形图可视化 webpack 输出文件的大小。

import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";

{
	// ...
	plugins: [
			new HtmlWebpackPlugin({
				title: "My Project",
			}),
			new CleanWebpackPlugin(),
			new BundleAnalyzerPlugin(),
		],
}

当执行构建时，会自动打开一个展示bundle信息的可视化页面。

更多参数见webpack-bundle-analyzer - npm (npmjs.com)

优化构建性能

以下操作可以提高构建性能。

启动production模式进行压缩

启动production模式会压缩js代码，但是如果将cs提取单独文件时，css需要额外的插件进行压缩，具体看压缩

限制loader应用范围

通过include和exclude来限制loader应用的范围，exclude通常包含node_modules目录。loader的作用是转换某些类型文件的内容，需要递归查找匹配文件并进行文件转换，限制更小的范围意味着更快的查找速度。

代码分离

将一些大体积的代码分离到单独的bundle文件中去，避免重复引用。