Bundle Visualizer

bundle-visualizer 包是一个分析工具，它在 Web 浏览器中提供可视化表示，显示初始客户端包中包含的内容。初始客户端包是浏览器下载并执行以运行 Meteor 应用的主要代码包，包括通过 meteor add <package> 或 node_modules 目录中包含的 Node 模块添加并在应用中使用的包。

¥The bundle-visualizer package is an analysis tool which provides a visual representation within the web browser showing what is included in the initial client bundle. The initial client bundle is the primary package of code downloaded and executed by the browser to run a Meteor application and includes packages which have been added via meteor add <package> or Node modules included in the node_modules directory and used in an application.

此可视化可以揭示哪些文件或包占用了初始客户端包中的空间的详细信息。这对于确定哪些导入可能是转换为动态 import() 语句（从初始客户端包中排除）的候选者，或者用于识别无意中包含在项目中的包非常有用。

¥This visualization can uncover details about which files or packages are occupying space within the initial client bundle. This can be useful in determining which imports might be candidates for being converted to dynamic import() statements (which are excluded from the initial client bundle), or for identifying packages which have been inadvertently included in a project.

工作原理

¥How it works

此软件包利用 <hash>.stats.json 文件，这些文件在使用 --production 标志运行应用时与文件包一起写入。缩小文件大小的具体细节由 minifier 包添加，因此查看下面的 minifier 要求非常重要。

¥This package utilizes the <hash>.stats.json files which are written alongside file bundles when the application is ran with the --production flag. The specific details for the minified file sizes is added by the minifier package and therefore it's important to review the minifier requirements below.

Android Studio

此软件包需要项目压缩器提供的数据。因此，有必要使用官方 standard-minifier-js 包或包含压缩过程中获得的文件大小详细信息的压缩器。

¥This package requires data provided by the project's minifier. For this reason, it is necessary to use the official standard-minifier-js package or a minifier which includes file-size details obtained during minification.

用法

¥Usage

由于打包包分析仅在最小化打包包上才真正准确，并且最小化不会在开发过程中发生（因为它是一个复杂且占用大量 CPU 的过程，会大大减慢正常开发速度），因此必须将此包与 meteor 工具的 --production 标志结合使用，以模拟生产打包并启用最小化。

¥Since bundle analysis is only truly accurate on a minified bundle and minification does not take place during development (as it is a complex and CPU-intensive process which would substantially slow down normal development) this package must be used in conjunction with the --production flag to the meteor tool to simulate production bundling and enable minification.

重要：由于此包在生产模式下处于活动状态，因此仅临时添加此包至关重要。这可以通过使用 meteor 的 --extra-packages 选项轻松实现。

¥IMPORTANT: Since this package is active in production mode, it is critical to only add this package temporarily. This can be easily accomplished using the --extra-packages option to meteor.

启用

¥Enabling

$ cd app/
$ meteor --extra-packages bundle-visualizer --production

查看

¥Viewing

启用后，照常在 Web 浏览器中查看应用（例如 http://localhost:3000/），图表将显示在应用顶部。

¥Once enabled, view the application in a web-browser as usual (e.g. http://localhost:3000/) and the chart will be displayed on top of the application.

禁用

¥Disabling

如果你使用 --extra-packages，只需从包含的包列表中删除 bundle-visualizer 并正常运行 meteor。

¥If you used --extra-packages, simply remove bundle-visualizer from the list of included packages and run meteor as normal.

如果你已将 bundle-visualizer 永久添加到 meteor add，则在打包或部署到 meteor remove bundle-visualizer 的生产之前，务必删除此包。

¥If you've added bundle-visualizer permanently with meteor add, it is important to remove this package prior to bundling or deploying to production with meteor remove bundle-visualizer.