bundle-visualizer

Documentation of Meteor's bundle-visualizer package.

The bundle-visualizer package is an analysis tool which provides a visualrepresentation within the web browser showing what is included in the initialclient bundle. The initial client bundle is the primary package of codedownloaded and executed by the browser to run a Meteor application and includespackages which have been added via meteor add <package> or Node modulesincluded in the node_modules directory and used in an application.

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

How it works

This package utilizes the <hash>.stats.json files which are written alongsidefile bundles when the application is ran with the —production flag. Thespecific details for the minified file sizes is added by the minifier packageand therefore it’s important to review the minifier requirements below.

Requirements

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 minifierwhich includes file-size details obtained during minification.

Usage

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

IMPORTANT: Since this package is active in production mode, it is criticalto only add this package temporarily. This can be easily accomplished usingthe —extra-packages option to meteor.

Enabling

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

Viewing

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 theapplication.

Disabling

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

If you’ve added bundle-visualizer permanently with meteor add, it isimportant to remove this package prior to bundling or deploying toproduction with meteor remove bundle-visualizer.