AngularとWebpackでAoTコンパイルするまでの話

@ngtool/webpackのAoTpプラグインを使ってAngularアプリを高速化しましょう、というお話です。

Transcript

1. AngularͱWebpackͰ AoTίϯύΠϧ͢Δ·Ͱͷ࿩ Զͷ࿩Λฉ͚ʂʂLTେձ #2
 2017/04/26
2. ࣗݾ঺հ • ৽෱ ٓါ ʢShinpuku Noriyukiʣ • גࣜձࣾϨείʢچ: ϕʔλιϑτʣ • ϑϩϯτΤϯυେ޷͖ʂ
 https://github.com/puku0x
3. ։ൃதͷϓϩμΫτ
4. എܠ • ϑϩϯτΤϯυपΓҰ৽͍ͨ͠ • Webpackಋೖ • AngularJS → Angular4΁
5. Webpack
6. Webpack 2.x • ґଘؔ܎ղܾͱม׵ˍ݁߹
7. Ҏલ࡞ͬͨ΋ͷ • npm + Webpack + PhoneGap ES5/CSS3 ʹม׵ https://github.com/puku0x/angularjs-onsenui2-webpack2
8. Angular
9. Angular 4.x • Google੡ͷMVˎϑϨʔϜϫʔΫ • AngularJSͱ͸ผ෺ (ƅЧƅ))
 ίϯϙʔωϯτࢦ޲ɺCSSΧϓηϧ ԽɺTypeScriptɺRxJS ɾɾɾ
10. ͋Μ͗ΎΒʔͬͯ
 ஗͍ΜͰ͠ΐʁ
11. AoTʢAhead of Timeʣ • ࣮ߦલʹ੩తͳDOMੜ੒ίʔυʹ ίϯύΠϧ͢Δॲཧ • όϯυϧαΠζ͸ͪΐͬͱ૿͑Δ • ը໘දࣔΛߴ଎Խ
12. AoTͷઃఆʁʁ • ͳΜ͔೉ͦ͠͏…
13. @ngtools/webpack
14. AoTϓϥάΠϯ • طଘͷwebpack.config.jsʹ௥Ճ͢ Δ͚ͩͰAoT༗ޮԽͰ͖Δ • ͜ΕͰউͭΔʂ
15. Webpackઃఆ
16. AoTઃఆʢWebpackʣ const AotPlugin = require('@ngtools/webpack').AotPlugin; config.plugins.push( new AotPlugin({ tsConfigPath: helpers.root('tsconfig.aot.json'), entryModule: helpers.root('src', 'app', 'app.module#AppModule'), }) ); config.module.rules.push({ test: /\.ts$/, use: ['@ngtools/webpack'] }); ϓϥάΠϯ ϩʔμઃఆ
17. AoTઃఆʢTypeScriptʣ { "angularCompilerOptions": { "genDir": "aot", "skipMetadataEmit": true }, "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, UTDPOpHKTPOʹ
 "OHVMBS༻ͷઃఆ௥Ճ
18. AoTͷޮՌΛଌΔ 6TFS
    5JNF
    "1*
 Λ࢖͏ Ϟδϡʔϧͷىಈ։͔࢝Β
 දࣔϖʔδͷඳը׬ྃ·ͰΛܭଌ
19. ଌఆ݁Ռ "P5ແޮ "P5༗ޮ όϯυϧαΠζ
 <,#>   දࣔ·Ͱͷ࣌ؒ
 <NT>   n=10
20. AoTޮՌ͋Γ ίϯϙʔωϯτ਺͕૿͑Ε͹͞ΒʹޮՌUP!?
21. ·ͱΊ • AoTΛ࢖͓͏ • @ngtools/webpackͳΒ؆୯ʂ • Angular CLI΍Ionic CLI͸ඪ४౥ࡌ
22. ϋϚͬͨͱ͜Ζ • LoaderOptionsPluginͰ
 minimize: true ͱͯ͠͸͍͚ͳ͍ • CSSϩʔμपΓ͸include࢖͓͏ ↓ࠓճͷ݁Ռ
 https://github.com/puku0x/angular-onsenui2-webpack2