Using Locally Generated Webpack Stats File

If you’re a feature pack developer and you’re curious about the composition of the Webpack bundles generated for your pages, PageBuilder Engine is set up to generate a JSON file of Webpack stats that can be ingested by a Webpack bundle analyzer tool.

Note that as of the time of writing this functionality is only available when running PageBuilder Engine locally.

Caveats

When using stats.json to check the size of the final bundle, you may not see the same improvements locally. Because the local bundle is constantly changing, the optimizations applied during deployment are not applied locally. If you want to simulate a production bundle locally, you can set MINIFY=true in your .env file. Keep in mind that your startup and rebuild times will be slower if you do this.

Stats File Location

The stats JSON file can be found in two places:

1. In your computer’s feature pack repo at .fusion/dist/stats.json.
2. Served from localhost: <CONTEXT_PATH>/dist/stats.json.

The file will contain a chunk for each html output type you have. The one most developers want to look at is named default.

Analysis

There are a number of free web-based tools that ingest stats.json files and display useful data about your bundle:

• Webpack Visualizer
• Webpack Analyse
• Statoscope - Visual diffing between two stats.json files

If you want to view it locally, you can install the Webpack Bundle Analyzer npm package. To install this package, run:

npm install -D webpack-bundle-analyzer

To use this package, run:

npx webpack-bundle-analyzer .fusion/dist/stats.json .fusion/dist/components/combinations/