How to use bundle analyzer?

Hello,
how to use https://github.com/webpack-contrib/webpack-bundle-analyzer in frontity ?

HI @mehul

Frontity genereate some reports automatically by using Webpack Bundle Analyzer so you don’t have to worry about it

When you do npx frontity dev or npx frontity build you get a build folder in the root of your project

β”œβ”€β”€ build
β”‚   β”œβ”€β”€ analyze
β”‚   β”‚   β”œβ”€β”€ module-development.html
β”‚   β”‚   └── server-development.html
β”‚   β”œβ”€β”€ bundling
β”‚   β”‚   β”œβ”€β”€ chunks.module.json
β”‚   β”‚   └── entry-points
β”‚   β”‚       β”œβ”€β”€ my-frontity-project
β”‚   β”‚       β”‚   └── client.ts
β”‚   β”‚       └── server.ts
β”‚   β”œβ”€β”€ server.js
β”‚   └── static
β”‚       β”œβ”€β”€ my-frontity-project.module.js
β”‚       └── list.module.js

Inside that build folder there is a .html file generated at analyze/module-development.html
This file is a visual report in the form of a tree generated by Webpack Bundle Analyzer.

This report shows you the modules included on each bundle and the size of each one, so you can analyze them and maybe decide using other modules (or not including a specific module at all) to reduce the size of the final bundle

Hope this helps

2 Likes