可视化查看依赖关系_五种可视化方案分析 webpack 打包性能瓶颈

前言

当项目业务功能达到一定规模时，默认的配置已经不足以满足开发、用户的期望，我们就需要对 webpack 配置进行优化。

关于优化，有几个基本规则：

• 首先知道要优化什么；

• 针对待优化点进行优化；

• 衡量优化前后对项目的影响；

如何知道具体该如何优化喃，最直观的方式是分析它的输出文件，但 webpack 打包后的文件非常大且可读性差，下面就介绍几种可视化的分析工具，帮助你快速定位问题所在。

一、测量构建时间

优化 webpack 构建速度的第一步是知道将精力集中在哪里。我们可以通过 speed-measure-webpack-plugin 测量你的 webpack 构建期间各个阶段花费的时间：

步骤一：安装 speed-measure-webpack-plugin

npm install speed-measure-webpack-plugin --save-dev

步骤二：配置

// 分析打包时间
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
// ...
module.exports = smp.wrap(prodWebpackConfig)

它能够：

• 分析整个打包总耗时；

• 每个插件和 loader 的耗时情况；

方便开发人员定位打包耗时瓶颈。

二、分析包内容

webpack-bundle-analyzer 扫描 bundle 并构建其内部内容的可视化。使用此可视化来查找大的或不必要的依赖项。

步骤一：安装 webpack-bundle-analyzer

npm install webpack-bundle-analyzer --save-dev

步骤二：配置

// 分析包内容
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports &