CODEWITHSUNDEEP
javascriptcssangularperformancesass
Abhiz
Abhiz

Reputation: 1030

Site loading issue: Angular 6 project taking too much time to load

late loading performance graph

In the above picture its clear that My application is taking too much time(3 mins as shown in the image) to load for the first time. I am not able to find the actual reason.

Some details about my application:

  1. There are total only 13 components in my project.
  2. I have not used lazy loading, because its not big enough in my point of view to use lazy loading. Because after build the main.js file size is just 2.4 MB
  3. To minify the size i have even deleted the spec.ts files and unwanted .scss files.
  4. There are 6 .svg files in the whole project.
  5. This is the command I am using for building. ' ng-build --prod --aot '

If any further details is needed I ll provide , Please help me out in finding the actual reason behind the delay.

Upvotes: 1

Views: 1832

Answers (2)

user4676340
user4676340

Reputation:

  1. It can be 13 components with 6K lines of code. Number of components don't matter, code complexity does.

  2. Lazy loading doesn't reduce the bundle size : lazy loading is the features that loads the Javascript when asked instead of when received

  3. spec files don't appear in the build, and .scss files are compiled into JS (making no difference in the final build, whether you use inline styling or URL styling)

  4. See point n° 1

  5. Again, similar to point n° 1, it depends on the commands you run and the code you need to compile.

I can't see images, but have you ran a lighthouse audit on your application ? It might tell you what you can improve.

Upvotes: 2

brk
brk

Reputation: 50291

Take the advantage of angular router and module lazy loading. For example create module of relevant component and when the vie is visited load the specific js file

In the example when customer route is visited it will load the relevant js file so is other module

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  }
];

Also you can run ng build --prod. This will compress the code, will eliminate dead code

Upvotes: 2

Related Questions