webpack-bundle-analyzer vs webpack-dashboard
Webpack 监控工具
搜索包...
webpack-bundle-analyzerwebpack-dashboard类似的npm包:

Webpack 监控工具

Webpack 监控工具是用于分析和可视化 Webpack 打包过程的工具。这些工具可以帮助开发者了解项目中各个模块的大小、依赖关系以及打包过程中的性能瓶颈，从而优化代码和配置。webpack-bundle-analyzer 提供了一个交互式的可视化界面，展示各个模块的大小和依赖关系，帮助开发者识别大型模块和潜在的优化点。而 webpack-dashboard 则是在命令行界面中提供实时的打包进度和性能指标，帮助开发者快速了解打包过程中的状态和时间消耗。

npm下载趋势

3 年

GitHub Stars 排名

统计详情

npm包名称
下载量
Stars
大小
Issues
发布时间
License
webpack-bundle-analyzer012,6671.45 MB252 个月前MIT
webpack-dashboard013,99152.2 kB403 年前MIT

功能对比: webpack-bundle-analyzer vs webpack-dashboard

可视化程度

  • webpack-bundle-analyzer:

    webpack-bundle-analyzer 提供了高度可视化的界面，展示每个模块的大小和依赖关系。你可以通过图表直观地看到哪些模块占用了最多的空间，帮助你进行针对性的优化。

  • webpack-dashboard:

    webpack-dashboard 主要在命令行中显示打包进度和性能指标，信息相对简洁。它不提供详细的可视化图表，但能快速让你了解打包过程中的状态和时间消耗。

实时反馈

  • webpack-bundle-analyzer:

    webpack-bundle-analyzer 在打包完成后生成报告，实时反馈能力较弱。你需要在打包后查看报告才能获取分析结果。

  • webpack-dashboard:

    webpack-dashboard 提供实时的打包进度反馈，能够在打包过程中动态显示各个阶段的时间消耗，帮助你快速识别问题。

优化建议

  • webpack-bundle-analyzer:

    webpack-bundle-analyzer 可以帮助你识别大型模块和冗余依赖，从而提供优化的方向。它支持生成 HTML 报告，方便分享和讨论。

  • webpack-dashboard:

    webpack-dashboard 主要提供性能指标，帮助你了解打包效率，但不提供具体的优化建议。它更侧重于实时监控而不是分析。

集成难易度

  • webpack-bundle-analyzer:

    webpack-bundle-analyzer 集成简单，只需在 Webpack 配置中添加插件即可。它支持多种配置选项，灵活性高。

  • webpack-dashboard:

    webpack-dashboard 也很容易集成，特别是在开发环境中。它可以与 Webpack Dev Server 配合使用，提供实时反馈。

示例代码

  • webpack-bundle-analyzer:

    webpack-bundle-analyzer 示例代码

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

module.exports = {
  // ...其他配置
  plugins: [
    new BundleAnalyzerPlugin(), // 默认配置，打开分析器
  ],
};
  • webpack-dashboard:

    webpack-dashboard 示例代码

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

module.exports = {
  // ...其他配置
  plugins: [
    new DashboardPlugin(), // 集成 Dashboard 插件
  ],
};

如何选择: webpack-bundle-analyzer vs webpack-dashboard

  • webpack-bundle-analyzer:

    选择 webpack-bundle-analyzer 如果你需要详细的可视化分析，帮助识别大型模块和优化依赖关系。它适合需要深入了解打包结果的项目。

  • webpack-dashboard:

    选择 webpack-dashboard 如果你更关注实时的打包进度和性能指标，想要在命令行中快速获取信息。它适合需要快速反馈的开发环境。

与webpack-bundle-analyzer类似的npm包

webpack-bundle-analyzer 是一个用于分析 webpack 打包结果的工具。它可以生成一个可视化的报告，帮助开发者了解项目中各个模块的大小和依赖关系，从而优化打包性能。虽然 webpack-bundle-analyzer 提供了强大的分析功能，但在生态系统中还有其他一些替代工具。以下是一些替代方案：

  • bundlewatch 是一个用于监控和报告 JavaScript 包大小变化的工具。它可以帮助开发者确保打包文件的大小不会意外增加，从而保持应用的性能。通过将打包结果与之前的版本进行比较，bundlewatch 可以在 CI/CD 流程中提供警告，确保团队在开发过程中保持对包大小的关注。
  • source-map-explorer 是一个用于分析 JavaScript 源映射文件的工具。它可以帮助开发者查看压缩后的代码中各个模块的大小和来源，提供详细的可视化报告。source-map-explorer 特别适合用于调试和优化生产环境中的 JavaScript 代码，因为它可以让开发者清楚地了解哪些模块占用了最多的空间。
  • stats-webpack-plugin 是一个 webpack 插件，用于生成 webpack 打包的统计信息。它可以输出详细的打包统计数据，方便开发者进行分析和优化。通过使用 stats-webpack-plugin，开发者可以获得关于模块、依赖关系和资源使用情况的深入洞察。
  • webpack-dashboard 是一个用于提升 webpack 开发体验的工具。它提供了一个友好的命令行界面，实时显示 webpack 的构建进度和状态。虽然它不是专门用于分析打包结果，但通过提供实时反馈，webpack-dashboard 可以帮助开发者更快地识别和解决构建过程中的问题。
  • webpack-visualizer-plugin 是一个用于生成 webpack 打包结果可视化报告的插件。它可以帮助开发者了解项目中各个模块的大小和依赖关系，提供直观的图形界面。webpack-visualizer-plugin 是一个轻量级的工具，非常适合需要快速查看打包结果的开发者。

要查看这些工具的比较，请访问：比较 bundlewatch vs source-map-explorer vs stats-webpack-plugin vs webpack-bundle-analyzer vs webpack-dashboard vs webpack-visualizer-plugin。

与webpack-dashboard类似的npm包

webpack-dashboard 是一个用于增强 Webpack 构建过程的工具，它提供了一个友好的用户界面，帮助开发者更好地监控和管理构建过程。通过实时显示构建状态、警告和错误信息，webpack-dashboard 使得开发者能够更高效地识别和解决问题，从而提高开发效率。虽然 webpack-dashboard 提供了强大的功能，但在 Webpack 生态系统中还有其他一些替代工具。

  • webpack-bundle-analyzer 是一个用于分析 Webpack 打包结果的工具。它以可视化的方式展示了项目的依赖关系和打包大小，帮助开发者识别哪些模块占用了过多的空间。通过生成交互式的树状图，webpack-bundle-analyzer 使得开发者能够深入了解应用程序的结构，从而优化性能和减少打包体积。如果你的目标是优化应用的性能并了解打包结果，webpack-bundle-analyzer 是一个非常有用的工具。

要查看 webpack-dashboard 与 webpack-bundle-analyzer 的比较，请访问以下链接：比较 webpack-bundle-analyzer 和 webpack-dashboard。

webpack-bundle-analyzer的README

npm node tests downloads

Webpack Bundle Analyzer

Visualize size of webpack output files with an interactive zoomable treemap.

Install

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

Usage (as a plugin)

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

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

It will create an interactive treemap visualization of the contents of all your bundles.

webpack bundle analyzer zoomable treemap

This module will help you:

  1. Realize what's really inside your bundle
  2. Find out what modules make up the most of its size
  3. Find modules that got there by mistake
  4. Optimize it!

And the best thing is it supports minified bundles! It parses them to get real size of bundled modules. And it also shows their gzipped, Brotli, or Zstandard sizes!

Options (for plugin)

new BundleAnalyzerPlugin(options?: object)
NameTypeDescription
analyzerModeOne of: server, static, json, disabledDefault: server. In server mode analyzer will start HTTP server to show bundle report. In static mode single HTML file with bundle report will be generated. In json mode single JSON file with bundle report will be generated. In disabled mode you can use this plugin to just generate Webpack Stats JSON file by setting generateStatsFile to true.
analyzerHost{String}Default: 127.0.0.1. Host that will be used in server mode to start HTTP server.
analyzerPort{Number} or autoDefault: 8888. Port that will be used in server mode to start HTTP server. If analyzerPort is auto, the operating system will assign an arbitrary unused port
analyzerUrl{Function} called with { listenHost: string, listenHost: string, boundAddress: server.address}. server.address comes from Node.jsDefault: http://${listenHost}:${boundAddress.port}. The URL printed to console with server mode.
reportFilename{String}Default: report.html. Path to bundle report file that will be generated in static mode. It can be either an absolute path or a path relative to a bundle output directory (which is output.path in webpack config).
reportTitle{String|function}Default: function that returns pretty printed current date and time. Content of the HTML title element; or a function of the form () => string that provides the content.
defaultSizesOne of: stat, parsed, gzip, brotliDefault: parsed. Module sizes to show in report by default. Size definitions section describes what these values mean.
compressionAlgorithmOne of: gzip, brotli, zstdDefault: gzip. Compression type used to calculate the compressed module sizes.
openAnalyzer{Boolean}Default: true. Automatically open report in default browser.
generateStatsFile{Boolean}Default: false. If true, webpack stats JSON file will be generated in bundle output directory
statsFilename{String}Default: stats.json. Name of webpack stats JSON file that will be generated if generateStatsFile is true. It can be either an absolute path or a path relative to a bundle output directory (which is output.path in webpack config).
statsOptionsnull or {Object}Default: null. Options for stats.toJson() method. For example you can exclude sources of your modules from stats file with source: false option. See more options here.
excludeAssets{null|pattern|pattern[]} where pattern equals to {String|RegExp|function}Default: null. Patterns that will be used to match against asset names to exclude them from the report. If pattern is a string it will be converted to RegExp via new RegExp(str). If pattern is a function it should have the following signature (assetName: string) => boolean and should return true to exclude matching asset. If multiple patterns are provided asset should match at least one of them to be excluded.
logLevelOne of: info, warn, error, silentDefault: info. Used to control how much details the plugin outputs.

Usage (as a CLI utility)

You can analyze an existing bundle if you have a webpack stats JSON file.

You can generate it using BundleAnalyzerPlugin with generateStatsFile option set to true or with this simple command:

webpack --profile --json > stats.json

If you're on Windows and using PowerShell, you can generate the stats file with this command to avoid BOM issues:

webpack --profile --json | Out-file 'stats.json' -Encoding OEM

Then you can run the CLI tool.

webpack-bundle-analyzer bundle/output/path/stats.json

Options (for CLI)

webpack-bundle-analyzer <bundleStatsFile> [bundleDir] [options]

Arguments are documented below:

bundleStatsFile

Path to webpack stats JSON file

bundleDir

Directory containing all generated bundles.

options

  -V, --version                   output the version number
  -m, --mode <mode>               Analyzer mode. Should be `server`, `static` or `json`.
                                  In `server` mode analyzer will start HTTP server to show bundle report.
                                  In `static` mode single HTML file with bundle report will be generated.
                                  In `json` mode single JSON file with bundle report will be generated. (default: server)
  -h, --host <host>               Host that will be used in `server` mode to start HTTP server. (default: 127.0.0.1)
  -p, --port <n>                  Port that will be used in `server` mode to start HTTP server. Should be a number or `auto` (default: 8888)
  -r, --report <file>             Path to bundle report file that will be generated in `static` mode. (default: report.html)
  -t, --title <title>             String to use in title element of html report. (default: pretty printed current date)
  -s, --default-sizes <type>      Module sizes to show in treemap by default.
                                  Possible values: stat, parsed, gzip, brotli, zstd (default: parsed)
  --compression-algorithm <type>  Compression algorithm that will be used to calculate the compressed module sizes.
                                  Possible values: gzip, brotli, zstd (default: gzip)
  -O, --no-open                   Don't open report in default browser automatically.
  -e, --exclude <regexp>          Assets that should be excluded from the report.
                                  Can be specified multiple times.
  -l, --log-level <level>         Log level.
                                  Possible values: debug, info, warn, error, silent (default: info)
  -h, --help                      output usage information

Size definitions

webpack-bundle-analyzer reports three values for sizes. defaultSizes can be used to control which of these is shown by default. The different reported sizes are:

stat

This is the "input" size of your files, before any transformations like minification.

It is called "stat size" because it's obtained from Webpack's stats object.

parsed

This is the "output" size of your files. If you're using a Webpack plugin such as Uglify, then this value will reflect the minified size of your code.

gzip

This is the size of running the parsed bundles/modules through gzip compression.

brotli

This is the size of running the parsed bundles/modules through Brotli compression.

zstd

This is the size of running the parsed bundles/modules through Zstandard compression. (Node.js 22.15.0+ is required for this feature)

Selecting Which Chunks to Display

When opened, the report displays all of the Webpack chunks for your project. It's possible to filter to a more specific list of chunks by using the sidebar or the chunk context menu.

Sidebar

The Sidebar Menu can be opened by clicking the > button at the top left of the report. You can select or deselect chunks to display under the "Show chunks" heading there.

Chunk Context Menu

The Chunk Context Menu can be opened by right-clicking or Ctrl-clicking on a specific chunk in the report. It provides the following options:

  • Hide chunk: Hides the selected chunk
  • Hide all other chunks: Hides all chunks besides the selected one
  • Show all chunks: Un-hides any hidden chunks, returning the report to its initial, unfiltered view

Troubleshooting

I don't see gzip or parsed sizes, it only shows stat size

It happens when webpack-bundle-analyzer analyzes files that don't actually exist in your file system, for example when you work with webpack-dev-server that keeps all the files in RAM. If you use webpack-bundle-analyzer as a plugin you won't get any errors, however if you run it via CLI you get the error message in terminal:

Error parsing bundle asset "your_bundle_name.bundle.js": no such file
No bundles were parsed. Analyzer will show only original module sizes from stats file.

To get more information about it you can read issue #147.

Other tools

  • Statoscope - Webpack bundle analyzing tool to find out why a certain module was bundled (and more features, including interactive treemap)

Maintainers


Yuriy Grunin
Vesa Laakso

Contributing

Check out CONTRIBUTING.md for instructions on contributing :tada:

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.