0

My website is an Angular SPA with SSR that works perfectly. To lazy load the components based on the path, I used lazy loaded modules.

Because of the libraries I use, my main.js file is roughly 3MB, which increases the Total Blocking Time (TBT) on pagespeed insights. I'll have to separate main.js into multiple files to lessen the TBT. Is it possible to bundle files like angular-core.bundle.js, angular-material.bundle.js, and chart-js.bundle.js?

I heard that this could be done using the splitchunksplugin, but I couldn't figure out how to do it. Please assist me in achieving this.

Tom
  • 183
  • 1
  • 1
  • 9
  • are you looking for [lazy loading](https://angular.io/guide/router#lazy-loading)? – Eliseo Feb 05 '22 at 11:36
  • No. I had already implemented lazy loading. I need to split the vendor bundle. – Tom Feb 05 '22 at 11:44
  • Your library has no "split" modules?. I want to say that, e.g. ng-bootstrap you can import all the library or only the modules you need in each moment (material angular use the same) – Eliseo Feb 05 '22 at 11:56
  • I'm using the required modules alone. – Tom Feb 05 '22 at 13:31
  • I've been struggling with the same now. You can solve it by refactoring your library to [use an entrypoint per module](https://github.com/MintPlayer/mintplayer-ng-bootstrap/commit/bd72156b6d56ad6d474ec065e047f2974e7c152c#diff-ad421895d3e8c7efee57da8d90183eac32ba42a512108e401a7487417505fd5aL3-R4) – Pieterjan Dec 13 '22 at 00:24

0 Answers0