又一个 webpack 打包分析工具: webpack-stats-viewer-plugin

374 阅读1分钟

webpack-stats-viewer

一个用于检查 webpack 统计信息的网站。

许多同类的 webpack 分析器工具可以显示摘要,但是作为开发人员,当我尝试深入研究并思考为什么将那些文件捆绑到这些块中时,这些工具让我感到无力,因为我很难看到更多的细节。所以我开发了这个工具,没有花里胡哨的魔法,作为开发者我需要的仅仅是更多的细节与。我想我需要它。

这是为了深入研究 webpack chunks 构成以及用于深度网站性能优化而打造的

特征

  • 易于阅读
    • 没有花里胡哨的各种图表。只是展示更多实用的细节
  • 找到为什么一个文件被引入(以及包含了那些)
    • 通过modules,我们可以获得更加详细的细节,不丢失任何内容
  • 单个HTML文件输出
    • 记录静态报告,便于比较/存储/归档
  • 提供在线网站与 webpack 插件
    • 易于使用

在 webpack 中使用

npm install webpack-stats-viewer-plugin

webpack.config.js:

import { WebpackStatsViewerPlugin } from 'webpack-stats-viewer-plugin';

export default {
  // ...
  plugins: [
    // ...
    new WebpackStatsViewerPlugin(),
  ]
  // ...
}

关于 webpack 统计信息

webpack.js.org/api/stats/

界面预览

使用在线版本

开源地址

github.com/moonrailgun…