Google - 如何利用 Webpack 提升 Web 应用程序的性能（三）：应用监控与分析

借助 webpack，您可以构建出尽可能小的应用程序，但对其进行跟踪并了解其内容仍然十分重要。否则，您可能会在不知情的情况下安装一个使应用程序增大两倍的依赖项。本节将介绍几个可以帮助您深入分析包的工具。要监控应用程序大小，您可以在开发过程中使用 webpack-dashboard。webpack-dashboard 是一个显示构建指标和统计信息的 GUI 工具。它允许您实时监控构建过程并快速发现任何问题。

webpack-dashboard 在 webpack 配置中使用 webpack-dev-server 提供程序启动。

const webpack = require('webpack');
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
  devServer: {
    contentBase: './dist',
    hot: true,
    stats: 'errors-only',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new DashboardPlugin(),
  ],
};

webpack-dashboard 启动后，您可以在浏览器中打开 http://localhost:3000/dashboard 来查看构建指标和统计信息。

另一个用于分析包的有用工具是 Source-Map Explorer。Source-Map Explorer 是一个允许您探索 webpack 生成的源映射的在线工具。它允许您可视化应用程序的依赖关系并查看各个模块的大小。

要使用 Source-Map Explorer，您需要首先生成包含源映射的 webpack 包。您可以通过在 webpack 配置中设置 devtool 选项来完成此操作。

module.exports = {
  devtool: 'source-map',
  // ...
};

生成包后，您可以将源映射文件上传到 Source-Map Explorer。该工具将生成一个交互式可视化，允许您探索应用程序的依赖关系并查看各个模块的大小。

webpack-bundle-analyzer 是另一个用于分析包的流行工具。webpack-bundle-analyzer 是一个生成应用程序包大小的可视化报告的工具。它允许您查看应用程序中各个模块的大小并识别可以改进的模块。

要使用 webpack-bundle-analyzer，您需要首先安装它。

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

安装 webpack-bundle-analyzer 后，您需要在 webpack 配置中添加一个插件。

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
  // ...
};

添加插件后，您需要运行 webpack 以生成应用程序包。webpack-bundle-analyzer 将生成一个包含应用程序包大小可视化报告的 HTML 文件。

Webpack Bundle Size Analyzer 是另一个用于分析包的工具。Webpack Bundle Size Analyzer 是一个允许您分析 webpack 包大小的命令行工具。它允许您查看应用程序中各个模块的大小并识别可以改进的模块。

要使用 Webpack Bundle Size Analyzer，您需要首先安装它。

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

安装 Webpack Bundle Size Analyzer 后，您需要在 webpack 配置中添加一个插件。

const BundleSizeAnalyzerPlugin = require('webpack-bundle-size-analyzer').BundleSizeAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleSizeAnalyzerPlugin(),
  ],
  // ...
};

添加插件后，您需要运行 webpack 以生成应用程序包。Webpack Bundle Size Analyzer 将生成一个包含应用程序包大小分析的 JSON 文件。

通过使用这些工具，您可以深入分析 webpack 生成的包并识别可以改进的模块。这将有助于您构建出更小、更快的应用程序。