How to improve bundle size?

vNext
1
  1. npx makes aurelia
  2. ChooseDefault ESNext Aurelia 2 App
  3. Run npm run build

Gets you 1 bundle file that has a 200kb file size.

Now, installing @aurelia/router and registering the RouterConfiguration then rebuilding gets you 1 bundle file that has a size of about 320kb. This also spits out a webpack warning:

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

This is just the base app, with no other dependencies installed and no additional code written.

Looking at bundlephobia, we can see that the package is tree-shakeable.

Screenshot 2023-05-23 at 12.38.45
Screenshot 2023-05-23 at 12.38.451649Ă—1407 139 KB

Adding "sideEffects": false to the config and rebuilding doesn’t really decease the bundle size.

This is not really a big problem for me, but I am curious how you folks approach this? Any recommendations to decrease the bundle size?

1 Like
2

For bundlephobia, Im not sure what’s being attributed to the size since that looks quite off.
The plan is to have the core modules around 150kB down from 200kB as in the sample app, together with the router it’ll be about 200kB (The router doesn’t have any size optimization atm yet). A side note that this 150kB already includes all the resources (repeat if promise switch portal etc) so it’ll likely to stay that way no matter how much more new code is added to an application. We won’t be able to get into the 100kB range for now since that’ll require quite a big effort that we cannot afford atm.

1 Like
3

Cool. Thanks for the info.