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
I’m not getting the output folder “analyze” when I try this. I’m probably making a super simple mistake. Can you explain how to get the analyze folder to generate from a fresh Frontity build?
Looks like analyze is false by default, just need to run
npx frontity build --analyze
2 Likes
