打包时间文件
如果希望看到每个 Loder 、每个 Plugin 消耗的打包时间，可以借助一个插件：speed-measure-webpack-plugin。
安装插件：
npm i speed-measure-webpack-plugin -D
修改 webpack 配置：
// webpack.config.js
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
// 使用 wrap 包裹导出的配置
module.exports = smp.wrap({
// ..
});
执行打包命令后就可以在命令行中看到以下效果：<br />
打包文件分析
方案一：
生成一个 stats.json 文件，然后通过 https://webpack.github.com/analyse 分析打包后文件的内容。
首先需要在 package.json 中添加一个 scripts 命令，在命令中添加 --profile --json=stats.json：
"scripts": {
"stats": "webpack --profile --json=stats.json"
}
然后打开上面的网站，在网站中选择这个 stats.json 文件。
方案二：
使用一个工具来完成 webpack-bundle-analyzer。
npm i webpack-bundle-analyzer -D
修改 webpack 配置：
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
]
}
运行打包命令后这个插件会自动打开 8888 端口，显示如下信息：<br />
若有收获，就点个赞吧
0 人点赞
