Angular Extreme Performance
9 gostaram2,063 visualizações
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
Angular Extreme Performance
- 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
- 7. #1 Bundling
- 8. #1 Bundling
- 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
- 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 …
- 49. 3x - 10x
- 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
- 56. markForCheck();
- 58. #4 trackby
- 59. #5 WebWorkers Event Loop Single thread
- 62. AoT !== SSR Otimiza JS Gera HTML/CSS
- 63. • Angular universal Ferramentas • Vue.js Server-Side • import ReactDOMServer from 'react-dom/server';