Analyze bundle size

[Daskus]

I would like to analyze my main.js bundle to see if I can reduce its size, since its over 3MB even after building it with aot.
How can I do this?
Can I use something like webpack-bundle-analyzer ? If yes, how? I already tried it but I could not find a webpack.config.js in my Ionic project.
Thanks in advance.

[urbiwan]

Hi
Did you find a solution ?

[Daskus]

Yes I use this: https://github.com/danvk/source-map-explorer

You just need to enable sourcemap generation in your package.json

[tobika]

@Daskus

Yes I use this: GitHub - danvk/source-map-explorer: Analyze and debug space usage through source maps

You just need to enable sourcemap generation in your package.json

Yep, example of how to build prod with sourcemaps activated:

Create Sourcemap in Prod but do not Include in apk

You can make a build with sourcemaps like this : ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build --prod --generateSourceMap true I use this to analyze my source maps via source-map-explorer. If you create a npm run command in your package.json you don’t have to put the whole path. Hope this works for you.

[Technbuzz]

We can also replace that whole line with the following as well

npx source-map-explorer www/build/main.js www/build/main.js.map

npx does other smart stuff as well, but here it will automagically find the local package.