1. O documento discute vários pilares para melhorar o desempenho de aplicações front-end, incluindo bundling, minificação, tree shaking, compilação à frente do tempo e precarregamento de módulos. 2. É explicada a diferença entre compilação no momento de execução e compilação à frente do tempo no Angular e seus benefícios para o desempenho. 3. Também são apresentadas outras técnicas como detecção de mudanças inteligente, uso de web workers e renderização do lado do servidor para melhorar

1. Extreme Performance

2. Gustavo Costa

3. @willgmbr

4. N R
Pilares da Performance
Front-end
Network performance Runtime performance

5. Bundling
1
2 Minification…+
3 Tree-shaking
4 AOT
5 Lazy-load
6 Service Worker
Network performance

6. W
Webpack
Tools
B
Browserify
R
Rollup
R
SystemJS
G
Gulp
G
Grunt
G
GCC
?
…

7. #1 Bundling

8. #1 Bundling

9. #2 Minification…+
Dead code
Ofuscation
Minification
UglifyJS

10. #3 Tree Shaking

11. JIT AoT
#4 AoT
JIT
(Just in time)
Compilation
AoT
(Ahead of time)
Compilation

12. • Compilamos para gerar um código mais eficiente para as VMs
Compilar?
• Versão 2 > cada componente tem seu PRÓPRIO Change
detector.
• O Angular precisa ‘compilar' todo o template para também
conseguir aplicar o tree shaking

13. 1 2
componente.js
(transpilado do typescript)
Entendendo um
Componente Angular
componente-internal.js
(ngfactory)
my-component

14. JIT
JIT
(Just in time)
Compilation
my-component.ts my-component.js
…

15. JIT
JIT
(Just in time)
Compilation
• Baixa todos os Javascripts.
• Angular é iniciado, verifica se é para iniciar em JIT ou AoT.
• Angular precisa compilar TODOS os componentes em JIT
• A aplicação é iniciada.

16. JIT
JIT
(Just in time)
Compilation
my-component.js
• Angular precisa ‘compilar’
esse template e criar tudo
isso via javascript, nosso
internal component ou
(ngfactory)
• Com isso criar o
Change detector
desse componente.
…

17. ng serve

18. • TODO o código do Angular foi IMPORTADO e TODO SEU
COMPILER e suas dependências também.
KEEP CALM!
• Não há ABSOLUTAMENTE NENHUMA técnica de
performance nesse código (minificação, tree shaking
etc…)
• Isso é que faz deixar o ‘auto reload’ rápido desenvolvendo
uma aplicação Angular

19. AoT
AoT
(Ahead of time)
Compilation
ng serve —aot
ng build—aot

20. AoT
AoT
(Ahead of time)
Compilation
• Também tem muito benefício em runtime
performance, veremos mais na frente.

21. JIT AoT
Recap #4 AoT
JIT
(Just in time)
Compilation
AoT
(Ahead of time)
Compilation

22. Vue

23. #5 lazy-load
People
Component01 Person
Component
02

24. People
Module
People
Service
People
Component
Person
Module
Person
Service
Person
Component
App
Component
App
Routing
App
Module
/
/person/:id
lazylazy
eager
#5 lazy-load

26. Lazy demo

30. HTTP2
1
2 ServiceWorker
3 Application Shell
4 CacheAPI
5 Pre-fetching
Outras técnicas

31. easy

32. Angular CLI

33. Build time!
ng build --prod

34. #5 compression

36. GCC + BROTLI

38. Em breve teremos hello world do
Angular com apenas:
40kb!

39. AoT
1
3 Change Detection
4 trackby
5 WebWorkers
Runtime performance
enableProdMode
2
6 Server-side rendering

40. JIT AoT
#1 AoT
JIT
(Just in time)
Compilation
AoT
(Ahead of time)
Compilation

41. JIT
JIT
(Just in time)
Compilation
• Baixa todos os Javascripts.
• Angular é iniciado, verifica se é para iniciar em JIT ou AoT.
• Angular precisa compilar TODOS os componentes em JIT
• A aplicação é iniciada.

42. AoT
AoT
(Ahead of time)
Compilation
• Baixa todos os Javascripts.
• Angular é iniciado, inicia com AoT
• Angular precisa compilar TODOS os componentes em JIT
• A aplicação é iniciada.

43. JIT
JIT
(Just in time)
Compilation
my-component.ts my-component.js
…

44. JIT
JIT
(Just in time)
Compilation
my-component.js
…
my-component-
internal.js

45. JIT
JIT
(Just in time)
Compilation
my-component-
internal.js
create()

46. JIT
JIT
(Just in time)
Compilation
my-component.tscreate()

47. JIT
JIT
(Just in time)
Compilation
my-component-
internal.js
detectChanges()

48. AoT
AoT
(Ahead of time)
Compilation

49. 3x - 10x

50. #2 enableProdMode

51. SMARTER?
#3 Change Detection

52. ChangeDetection.Default
user === valorAntigoDoUser ?
user.name === valorAntigoDoUser.name ?
user.bio === valorAntigoDoUser.bio ?
user.propsInView * n
MUTABILIDADE

53. ChangeDetection.OnPush
user === valorAntigoDoUser ?
run change detection! :-)
IMUTABILIDADE

54. ChangeDetection Demo

55. Notifique o
Angular!

56. markForCheck();

58. #4 trackby

59. #5 WebWorkers
Event Loop
Single thread

60. #6 Server-side rendering

62. AoT !== SSR
Otimiza JS Gera HTML/CSS

63. • Angular universal
Ferramentas
• Vue.js Server-Side
• import ReactDOMServer from 'react-dom/server';

64. https://github.com/mgechev/angular-performance-checklist
https://blog.thoughtram.io
https://victorsavkin.com
https://twitter.com/jeffbcross
Referências
https://angular.io