写作不易，未经作者允许禁止以任何形式转载！
如果觉得文章不错，欢迎关注、点赞和分享！

[分享]Webpack 打包分析工具 (juejin.cn)

Webpack 打包分析

分享时间和文件的分析工具，便于进行打包优化。

打包的时间分析

如果希望看到每一个 Loader、每一个 Plugin 消耗的打包时间，可以借助于一个插件:speed-measure-webpack-plugin
- 注意:该插件在最新的 webpack 版本中存在一些兼容性的问题(和部分 Plugin 不兼容)
- 截止 2021-3-10 日，但是目前该插件还在维护，所以可以等待后续是否更新;
安装
- npm i speed-measure-webpack-plugin
使用
- 创建插件导出的对象 SpeedMeasurePlugin;
- 使用 smp.wrap 包裹我们导出的 webpack 配置;

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

module.exports = function (env) {
  const isProduction = env.production;
  process.env.NODE_ENV = isProduction ? 'production' : 'development';

  const config = isProduction ? prodConfig : devConfig;
  const webpackConfig = merge(commonConfig(isProduction), config);
  return smp.wrap(webpackConfig);
};

效果

打包后的文件分析

方案一：生成 stats.json 文件

编辑 npm script

"stats": "webpack --config ./config/webpack.common.js --env production --profile --json=stats.json",

运行 npm run stats
- 根目录下生成了一个 stats.json
json 文件内容较复杂，可以将文件上传至https://webpack.github.io/analyse/ 进行分析
效果

方案二：使用 webpack-bundle-analyzer

安装
- npm install webpack-bundle-analyzer
webpack.common.js

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

plugins: [new BundleAnalyzerPlugin()];

在打包 webpack 的时候，这个工具打开一个 8888 端口上的服务，我们可以直观的看到每个包的大小。
- 比如有一个包是通过一个 Vue 组件打包的，但是非常的大，那么我们可以考虑是否可以拆分出多个组件，并且对其进行懒加载;
- 比如一个图片或者字体文件特别大，是否可以对其进行压缩或者其他的优化处理;
效果