0

I have a pretty big project and in order to reduce bundle size i decided to divide it into multiple modules with lazy load. and here is my app-routing

const routes: Routes = [
  {
    path: 'profile',
    loadChildren: () => import('./pages/public/freelancer-profile/freelancer-profile.module').then(m => m.FreelancerProfileModule)
  },
  {
    canActivate: [LoginGuardService],
    path: 'panel',
    loadChildren: () => import('./pages/private/private.module').then(m => m.PrivateModule)
  },
  {
    path: '',
    loadChildren: () => import('./pages/public/public.module').then(m => m.PublicModule)
  },
  {
    path: '',
    loadChildren: () => import('./pages/landing/landing.module').then(m => m.LandingModule)
  },
  {
    path: '',
    loadChildren: () => import('./pages/public/logging/logging.module').then(m => m.LoggingModule)
  },
  {
    path: '**',
    redirectTo: '404',
  }
];

i expected landing.module to be loaded only if page path is in its module but here is what happens : if page path is on logging.module , public.module and landing.module chunks are being downloaded as well. how can i fix this ? i was thinking if there was a way to check URLs and download module only if URL matches one of the paths in the module

note: i cant change urls and add prefix to avoid this because pages are indexed through search engines.

Behnam Aminazad
  • 411
  • 2
  • 5
  • 19
  • why some paths has empty as same? Does it work? – ClusterH Apr 04 '21 at 12:06
  • this can't work. how would you know which paths are added in the module without loading it? you should rethink your module architecture to map one path prefix to one module. – Clashsoft Apr 04 '21 at 12:11
  • some of the path properties in route config are empty. why you do not specify the route for them? – Seyed-Amir-Mehrizi Apr 04 '21 at 12:55
  • @ClusterH they have same prefix in their routerchild routes are different for example i have /home /dashboard in first module and /search and /panel in second module i cant divide them with prefix – Behnam Aminazad Apr 04 '21 at 19:54
  • @Clashsoft in production project you cant have added useless prefix to divide chunks because of seo and loading all landing pages in a single chunk will affect page speed. i am looking for a way not to load all of landing pages chunk when user visits single page – Behnam Aminazad Apr 04 '21 at 19:56
  • @Seyed-Amir-Mehrizi because they dont have the same prefix and i cant specify a route for them. routerchild routes are different in each module. – Behnam Aminazad Apr 04 '21 at 19:57
  • why dont you create a HomeModule and a DashboardModule then? If they share components you can create a HomeSharedModule or whatever. Same for the other routes – Clashsoft Apr 04 '21 at 20:06
  • @Clashsoft because i would have a large bundle, i wanted to divide them into smaller bundles to increase performance. – Behnam Aminazad Apr 07 '21 at 05:48

0 Answers0