V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
moonrailgun
V2EX  ›  分享创造

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

  •  
  •   moonrailgun ·
    moonrailgun · 2022-09-26 10:29:46 +08:00 · 1462 次点击
    这是一个创建于 549 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 统计信息

    https://webpack.js.org/api/stats/

    界面查看

    screenshot.png

    screenshot2.png

    使用在线版本

    开源地址

    https://github.com/moonrailgun/webpack-stats-viewer


    顺便再打个小广告: 专为企业与私域用户打造的开源即时通讯应用 tailchat

    5 条回复    2022-09-28 10:20:23 +08:00
    yuthelloworld
        1
    yuthelloworld  
       2022-09-26 14:35:23 +08:00
    有没有 vite 的,也就是 rollup 的
    moonrailgun
        2
    moonrailgun  
    OP
       2022-09-26 14:54:31 +08:00
    @yuthelloworld vite 有什么好分析的。vite 的打包机制非常简单粗暴
    yuthelloworld
        3
    yuthelloworld  
       2022-09-26 15:20:44 +08:00
    @moonrailgun #2 vite 用的是 rollup 打包,怎么简单粗暴了
    houzhenhong
        4
    houzhenhong  
       2022-09-26 17:58:20 +08:00 via iPhone
    可以试试 https://github.com/perfsee/perfsee 这个可以分析,rollup ( vite ),esbuild ,webpack
    @yuthelloworld
    moonrailgun
        5
    moonrailgun  
    OP
       2022-09-28 10:20:23 +08:00
    @yuthelloworld 因为 rollup 没有 webpack 这么多的配置项和优化项。代码分片也是简单的根据 lazy import 进行的分片,本身没有什么非常特别的

    所以 rollup 适合库(简单且少中间代码)而 webpack 适合项目。当然 webpack 更多配置项的和优化项也带来了更高的复杂度。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1361 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 17:42 · PVG 01:42 · LAX 10:42 · JFK 13:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.