2

My angular 12 application is large and takes time to load the first time for any user. No api is triggered until all js files are loaded. If I see in Dev Tools (js enabled), You see the below screen shot. Is there anyway I can lazy load these files? enter image description here

user2837961
  • 1,505
  • 3
  • 27
  • 67
  • Why do you have so many js files? The default config there are about 6 js files, see also https://stackoverflow.com/q/60177478/1260204. These do have cash busting hashes in the names but still only 6. How is your application structured or what are you loading that you have this many js files and also without prefixes in the name. – Igor Apr 12 '23 at 11:37
  • To manage JS files in a large Angular 12 application: use lazy loading, split code into smaller modules, use tree shaking, optimize code, use third-party libraries carefully, and consider using code splitting tools. – Umair Rasheed Apr 12 '23 at 11:39
  • These are built minified js files – user2837961 Apr 12 '23 at 11:43
  • It is hard to say because we have no access to your structure or your code. If you want more help you need to provide an [mcve] that illustrates the problem configured in the same manner your application is. – Igor Apr 12 '23 at 12:39

1 Answers1

0

You need to enable lazyloading your routes in the app.routing.ts should look like this:

const appRoutes: Routes = [
  {
    path: 'foobar',
    loadChildren: () =>
      import('./foobar.module').then(m => m.FoobarModule),
  }];

The module will be loaded only when the user navigates to the route.

heaxyh
  • 573
  • 6
  • 20