Schnellere SPA mit AOT und Tree Shaking am Beispiel Angular

Slides from my Talk at EnterJS 2017 in Darmstadt

Transcript

1. Schnellere SPA mit AOT und Tree Shaking am Beispiel Angular Manfred Steyer SOFTWAREarchitekt.at
2. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 3 Manfred Steyer
3. Inhalt • Motivation • Angular Compiler und AOT • DEMO • Beobachtungen • Ausblick: Closure
4. Motivation
5. Template Page ▪ 6 <input [(ngModel)]="von"> <input [(ngModel)]="nach"> <button [disabled]="!von || !nach" (click)="search()"> Search </button> <table> <tr *ngFor="let flug of fluege"> <td>{{flug.id}}</td> <td>{{flug.datum}}</td> <td>{{flug.von}}</td> <td>{{flug.nach}}</td> </tr> </table> Two-Way-Binding Event-Binding Property-Binding Template
6. Template auswerten => Aufwand
7. Angular Compiler
8. Angular Compiler HTML Template JavaScript Template Compiler
9. Ansätze für das Kompilieren von Templates • JIT: Just im Time, zur Laufzeit • AOT: Ahead of Time, beim Build
10. Ahead of Time (AOT) Compilation
11. Vorteile von AOT • Bessere Startup-Performance • Kleinere Bundles: Compiler muss nicht ausgeliefert werden • Bessere statische Analysierbarkeit des Programmcodes • Nicht benötigte Frameworkbestandteile entfernen • Tree Shaking • AOT ist keine Voraussetzung für Tree Shaking, hilft aber App Framework Nicht benötigt
12. HTML TypeScript EcmaScript Webpack, Rollup etc. Treeshaked Bundle AOT Angular Compiler
13. AOT implementieren
14. Bibliotheken "@angular/compiler-cli": "^4.0.0", "@angular/platform-server": "^4.0.0",
15. tsconfig.aot.json { "compilerOptions": { "target": "es5", "module": "es2015", "moduleResolution": "node", "sourceMap": true, "outDir": "dist/unbundled-aot", […] }, "angularCompilerOptions": { "genDir": "aot", "skipMetadataEmit" : true } }
16. tsconfig.aot.json { "compilerOptions": { "target": "es5", "module": "es2015", "moduleResolution": "node", "sourceMap": true, "outDir": "dist/unbundled-aot", […] }, "angularCompilerOptions": { "genDir": "aot", "skipMetadataEmit" : true } }
17. tsconfig.aot.json { "compilerOptions": { "target": "es5", "module": "es2015", "moduleResolution": "node", "sourceMap": true, "outDir": "dist/unbundled-aot", […] }, "angularCompilerOptions": { "genDir": "aot", "skipMetadataEmit" : true } }
18. ngc ngc -p tsconfig.aot.json
19. main.aot.ts import { platformBrowser } from '@angular/platform-browser'; import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory'; platformBrowser() .bootstrapModuleFactory(AppModuleNgFactory) .catch(err => console.error(err));
20. AOT mit Angular CLI und Webpack
21. Angular CLI • Schalter • ng build --prod --json-stats • @ngtools/webpack mit AotPlugin • Auch ohne CLI einsetzbar
22. DEMO
23. Beobachtungen
24. Startzeit der (einfachen) Demo-Anwendung ohne AOT
25. Startzeit der (einfachen) Demo-Anwendung mit AOT
26. Builds in Vergleich 0 100.000 200.000 300.000 400.000 500.000 600.000 Dev-Build Prod-Build Prod+AOT-Build Builds
27. Main-Bundles im Vergleich 0 2.000 4.000 6.000 8.000 10.000 12.000 Dev-Build Prod-Build Prod+AOT-Build Main-Bundle
28. AOT: Trade off zwischen Bundle-Größe und Start- Performance
29. Mehr auf SOFTWAREarchitekt.at • 5 Things You Wouldn't Necessarily Expect When Using AOT And Tree Shaking In Angular, https://goo.gl/FwuzrR
30. AOT ist strikter als JIT
31. Wie mit Fehlermeldungen umgehen? • Listen im Web • Lesen und korrigieren • Angular Language Service • Codevervollständigung im Template • AOT Checks • Allgemeine Implementierung vom Angular Team • Plugins für mehrere IDEs
32. Ausblick: AOT soll default werden • Jetzt schon bei Google der Fall (Pflicht) • Watch-Mode/ Inkrementelles Kompilieren • Tobias Bosch (ng-conf, 2017): https://goo.gl/neXaSZ
33. Tree Shaking nicht perfekt • Webpack/ Rollup kann nicht alles “abschütteln” • Lösung: Nur benötigte Angular-Module importieren • Alternative: Aggressiveres Tree Shaking • Closure Compiler
34. Ausblick: Closure Compiler
35. Closure Compiler Erzeugt optimiertes JavaScript Google Docs Office 365 Experten-Tool: Konfiguration Nicht alles funktioniert mit Closure Metadaten in Form von Kommentaren E2E-Testing notwendig Herausforderung: Dritt-Pakete Angular Package Format
36. Closure und die Beispiel-Anwendung (jeweils ohne Polyfills) 0 20.000 40.000 60.000 80.000 100.000 120.000 CLI/ Webpack Closure CLI/Webpack vs. Closure
37. ABC: Angular/Bazel/Closure • Bazel: Build • Closure: Optimierung • Google-interne Tools für die Öffentlichkeit • Alex Eagle (Angular Core-Team): https://goo.gl/uUM7Zd
38. Mehr auf SOFTWAREarchitekt.at • Shrinking Angular Bundles with Closure, https://goo.gl/yuEZAk
39. DEMO
40. Fazit Verwenden Sie AOT Tree Shaking: Kleinere Bundles AOT strikter als JIT Angular Language Service AOT by Default Closure
41. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer