Transferir como PDF, PPTX
Carregado porGustavo Costa
Angular Extreme Performance
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 Seminar [한빛미디어 리얼타임 세미나]](https://cdn.slidesharecdn.com/ss_thumbnails/angularseminarhanbitpublic-170725053734-thumbnail.jpg?width=640&height=640&fit=bounds)
Angular Extreme Performance
- 1.
- 2.
- 3.
- 4. N R Pilares daPerformance Front-end Network performance Runtime performance
- 5. Bundling 1 2 Minification…+ 3 Tree-shaking 4AOT 5 Lazy-load 6 Service Worker Network performance
- 6.
- 7.
- 8.
- 9.
- 10.
- 11. JIT AoT #4 AoT JIT (Justin time) Compilation AoT (Ahead of time) Compilation
- 12. • Compilamos paragerar 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 dotypescript) Entendendo um Componente Angular componente-internal.js (ngfactory) my-component
- 14. JIT JIT (Just in time) Compilation my-component.tsmy-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.
- 18. • TODO ocó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 ngserve —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 #4AoT JIT (Just in time) Compilation AoT (Ahead of time) Compilation
- 22.
- 23.
- 24.
- 26.
- 30. HTTP2 1 2 ServiceWorker 3 ApplicationShell 4 CacheAPI 5 Pre-fetching Outras técnicas
- 31.
- 32.
- 33. Build time! ng build--prod
- 34.
- 36.
- 38. Em breve teremoshello world do Angular com apenas: 40kb!
- 39. AoT 1 3 Change Detection 4trackby 5 WebWorkers Runtime performance enableProdMode 2 6 Server-side rendering
- 40. JIT AoT #1 AoT JIT (Justin 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.tsmy-component.js …
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 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.
- 55.
- 56.
- 58.
- 59.
- 60.
- 62. AoT !== SSR OtimizaJS Gera HTML/CSS
- 63. • Angular universal Ferramentas •Vue.js Server-Side • import ReactDOMServer from 'react-dom/server';
- 64.