mgechev/angular-performance-checklist

⚡ Cheatsheet for developing lightning fast progressive Angular applications

angular-performance-checklist's Issues

Angular 6 Tree not able to load 1000000 nodes

Currently Angular tree not able to hold more than 30k nodes. For workaround I have used tree table and it was able to hold 80k nodes.

As per our requirement, we want an angular tree that can hold upto 1million nodes and it's child also.

Follow below steps to reproduce the issue:

Step 1 - Modify app.component.ts like below-

import { Component } from '@angular/core'; import { TreeNode } from 'primeng/components/common/treenode';

@component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent {

selectedNodes: TreeNode[]; nodes: TreeNode[]; data: any;

constructor() { this.nodes = []; this.data = ""; } ngOnInit() { this.nodes = []; this.data = "";

for (let i = 0; i < 100000; i++) { this.nodes.push( { label: "Node_" + i, data: "Backup Folder", expandedIcon: "fa fa-folder-open", collapsedIcon: "fa fa-folder" }); } } } Step 2- Modify app.module.ts like this

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

import { AppComponent } from './app.component'; import { TreeModule,TreeTableModule } from 'primeng/primeng';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, TreeModule, TreeTableModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Step 3 - Modify app.component.html as below

I am using node version 10.6, angular version 6, primeng version 6

Concept of Angular (ngZone + ChangeDetection) better than concept React, Vue (Virtual DOM)?

It would be interesting to make a comparison in order to compete

Should we add bazel in build tools

Hi @mgechev ,
Do you think, Bazel is worth mentioning in Build tools, I will prepare a draft if you are fine?

Add ngx-build-modern as resource for bundling

Link is broken

Hi Everyone,

In this section, I am seeing the @angular/compiler-cli link as broken. Current link is https://github.com/angular/angular/tree/master/modules/%40angular/compiler-cli.

Please provide actual link.

Thanks.

Use pipes instead of function calls in templates

It is necessary to correct the documentation for Angular 5

For example, now you need to use not trackBy, but trackByFunction.

missing resources

http2 and webpack
https://medium.com/webpack/webpack-http-2-7083ec3f3ce6
webpack offline(/ServiceWorker)
https://github.com/NekR/offline-plugin
webpack webworker-loader
https://github.com/webpack/worker-loader
preboot for server-side rendering
https://github.com/angular/preboot

Inaccurate trackBy section

Looking at the DefaultIterableDiffer, it uses trackByIdentity function in case the trackBy argument is not provided. This makes the trackBy section inaccurate since Angular is never going to destroy the entire list in case trackBy is not provided to the differ.

This change might has been introduced in recent releases.

@tytskyi would you verify so that we can correct the content?

Proposition to add note about trackBy and ngDoCheck

Hi @mgechev i noticed that there is no notes about using trackBy function for *ngFor and nothing about using ngDoCheck to reduce heavy calculation in multiple places in template.

Would you be open to accept pull request on that?
If so - i would be happy to send it this weekends.

Can I get some clarification on ngZoneEventCoalescing feature flag?

Hi @mgechev , I found this feature by reading https://twitter.com/yurzui/status/1327248065137430528?s=20. And then I checked the source code https://github.com/angular/angular/blob/master/packages/core/src/application_ref.ts#L268.
Everything I can find seems saying this is a performance enhancement.
Is there any side effects that stops Angular turn it on by default?
If this is definitely a performance enhancement feature, should we add to this doco?
Thanks in advance.

Add comment about new lettable RxJS operator

In the section about tree-shaking and dead-code removal, it could be interesting to warn people about RxJS and its imports mechanism.

RxJS is just a third party library, but since it play a big part in the Angular ecosystem, I think it is worth to talk about the new lettable operators.

Add a note about tree-shakeable services

With the new angular API a developer can add a providedIn attribute to the Injectable decorator instead of hardly defining it as a dependency in the "providers" attribute of an ngModule declaration as follows

@Injectable({
    providedIn: 'root'
})

After removing the import statement for that service in the module as well as the "providers" attribute. This will allow the service to be tree-shakeable and it won't be included in the final bundle if no other services/components are using it.

see https://coryrylan.com/blog/tree-shakeable-providers-and-services-in-angular

Wrong property name?

I think in the code example here: run-outside-angular , there is a call to a property that doesn't exist?

Question: ComponentMetadata Default Value

Thankfully, we don't have to do this manually. The ComponentMetadata interface provides the property preserveWhitespaces which by default has value false, because removing the whitespace always may influence the DOM layout. In case we set the property to false Angular will trim the unnecessary whitespace which will lead to further reduction of the bundle size.

Should we set it to true right?