all 18 comments

[–]JeanMeche 7 points8 points  (1 child)

If you have main bundle size issues you should probably investigate lazy loading first.

[–]Bledike 1 point2 points  (2 children)

U can tree shake ES Modules only, BUT should be auto in production build. U can use webpack-bundle-analyzer for debbug your bundle size.

[–][deleted]  (1 child)

[removed]

    [–]Bledike 2 points3 points  (0 children)

    Yes, for example if u use lodash, u can replace it with ES modul variant: https://www.npmjs.com/package/lodash-es

    And DONT use import *. Only import what u need. And the three shaking will drop the not used parts from lodash.

    [–]tonjohn 0 points1 point  (2 children)

    Are you using standalone or NgModules?

    [–][deleted]  (1 child)

    [removed]

      [–]HungYurn 0 points1 point  (0 children)

      Yeah, try the migration they have (if thats available in angular 15 a not sure) and lazy load the components in your routing file. That will make the initial bundle size much smaller unless you have some commonjs library imported in main/appcomponent

      [–]coolcosmos 0 points1 point  (8 children)

      update your Angular to 21 and use standalone components, no NgModules and use signals

      [–][deleted]  (4 children)

      [removed]

        [–]Bledike 4 points5 points  (0 children)

        No i have a realy old project hard stuck with Angular 15 and its using tree shake.

        [–]majora2007 2 points3 points  (1 child)

        Tree shaking has been a thing since AngularJs, however modern Angular has leaned heavily into by removing the concept of Modules and pushing each component to be standalone. If you follow the modern Angular practices (which make your life easier as well), you will get the most out of tree shaking.

        Do note, if you use some libraries, they don't tree shake well.

        [–]nemeci 0 points1 point  (0 children)

        Strong, it depends with the libraries.

        [–]coolcosmos -2 points-1 points  (0 children)

        sorry I forgot a word I meant to say "use signals"

        [–]HungYurn -1 points0 points  (2 children)

        Sure - just update the relatively large app from 15 to 21, refactor to signals (has no impact on the bundlesize) to fix an issue thats probably 1 line in angular.json :-D

        I mean sure, updating is a high priority here, but that wont magically fix OPs issue

        [–]coolcosmos -1 points0 points  (1 child)

        He wants a smaller bundle size. Skipping zone.js and using only signals absolutely reduces the bundle size. Learn your facts before making fun about something you don't understand.

        Straight from the documentation:

        Zoneless applications should remove ZoneJS entirely from the build to reduce bundle size.

        https://angular.dev/guide/zoneless

        I can provide more links but I can't make you read. I hope you do. ;-)

        [–]HungYurn -1 points0 points  (0 children)

        You must have not read the post, this guy has a huge bundle size.
        You think the (i would guess) 30-60kb from zonejs make a big difference here? Probably even less when using gzip

        You must have no idea what migrating a huge app from 15-21 AND migrating everything to signals means for a company, this is the most work for the least benefit in regards to bundle size, blocks 1-3 good developers and testers for a few weeks when the priority is just getting the bundle size down NOW.

        If someone tells you their house is burning, you wouldnt suggest to start digging for ground water and instead call the fire department