Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AngularとWebpackでAoTコンパイルするまでの話
Search
puku0x
April 26, 2017
Technology
0
580
AngularとWebpackでAoTコンパイルするまでの話
@ngtool/webpackのAoTpプラグインを使ってAngularアプリを高速化しましょう、というお話です。
puku0x
April 26, 2017
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
160
ファインディでのGitHub Actions活用事例
puku0x
9
2.9k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
400
Findyの開発生産性を上げるためにやったこと
puku0x
1
550
Angularコーディングスタイルガイドはいいぞ
puku0x
1
250
Nx CloudでCIを爆速にした話
puku0x
0
740
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
770
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.5k
Other Decks in Technology
See All in Technology
テストを書かないためのテスト/ Tests for not writing tests
sinsoku
1
150
いまからでも遅くないコンテナ座学
nomu
0
200
デジタルアイデンティティ人材育成推進ワーキンググループ 翻訳サブワーキンググループ 活動報告 / 20250114-OIDF-J-EduWG-TranslationSWG
oidfj
0
130
知っててうれしい HTTP Cookie を使ったセッション管理について
greendrop
1
110
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
1.7k
ZOZOTOWN の推薦における KPI モニタリング/KPI monitoring for ZOZOTOWN recommendations
rayuron
1
900
.NET 最新アップデート ~ AI とクラウド時代のアプリモダナイゼーション
chack411
0
150
ハイテク休憩
sat
PRO
2
190
rootful・rootless・privilegedコンテナの違い/rootful_rootless_privileged_container_difference
moz_sec_
0
110
サーバーなしでWordPress運用、できますよ。
sogaoh
PRO
0
170
#TRG24 / David Cuartielles / Post Open Source
tarugoconf
0
420
Evolving Architecture
rainerhahnekamp
3
220
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
490
Facilitating Awesome Meetings
lara
50
6.2k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Why Our Code Smells
bkeepers
PRO
335
57k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Six Lessons from altMBA
skipperchong
27
3.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
550
Transcript
AngularͱWebpackͰ AoTίϯύΠϧ͢Δ·Ͱͷ ԶͷΛฉ͚ʂʂLTେձ #2 2017/04/26
ࣗݾհ • ৽ ٓါ ʢShinpuku Noriyukiʣ • גࣜձࣾϨείʢچ: ϕʔλιϑτʣ •
ϑϩϯτΤϯυେ͖ʂ https://github.com/puku0x
։ൃதͷϓϩμΫτ
എܠ • ϑϩϯτΤϯυपΓҰ৽͍ͨ͠ • Webpackಋೖ • AngularJS → Angular4
Webpack
Webpack 2.x • ґଘؔղܾͱมˍ݁߹
Ҏલ࡞ͬͨͷ • npm + Webpack + PhoneGap ES5/CSS3 ʹม https://github.com/puku0x/angularjs-onsenui2-webpack2
Angular
Angular 4.x • GoogleͷMVˎϑϨʔϜϫʔΫ • AngularJSͱผ (ƅЧƅ)) ίϯϙʔωϯτࢦɺCSSΧϓηϧ ԽɺTypeScriptɺRxJS ɾɾɾ
͋Μ͗ΎΒʔͬͯ ͍ΜͰ͠ΐʁ
AoTʢAhead of Timeʣ • ࣮ߦલʹ੩తͳDOMੜίʔυʹ ίϯύΠϧ͢Δॲཧ • όϯυϧαΠζͪΐͬͱ૿͑Δ • ը໘දࣔΛߴԽ
AoTͷઃఆʁʁ • ͳΜ͔ͦ͠͏…
@ngtools/webpack
AoTϓϥάΠϯ • طଘͷwebpack.config.jsʹՃ͢ Δ͚ͩͰAoT༗ޮԽͰ͖Δ • ͜ΕͰউͭΔʂ
Webpackઃఆ
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'] }); ϓϥάΠϯ ϩʔμઃఆ
AoTઃఆʢTypeScriptʣ { "angularCompilerOptions": { "genDir": "aot", "skipMetadataEmit": true }, "compilerOptions":
{ "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, UTDPOpHKTPOʹ "OHVMBS༻ͷઃఆՃ
AoTͷޮՌΛଌΔ 6TFS5JNF"1* Λ͏ Ϟδϡʔϧͷىಈ։͔࢝Β දࣔϖʔδͷඳըྃ·ͰΛܭଌ
ଌఆ݁Ռ "P5ແޮ "P5༗ޮ όϯυϧαΠζ <,#> දࣔ·Ͱͷ࣌ؒ <NT>
n=10
AoTޮՌ͋Γ ίϯϙʔωϯτ͕૿͑Ε͞ΒʹޮՌUP!?
·ͱΊ • AoTΛ͓͏ • @ngtools/webpackͳΒ؆୯ʂ • Angular CLIIonic CLIඪ४ࡌ
ϋϚͬͨͱ͜Ζ • LoaderOptionsPluginͰ minimize: true ͱ͍͚ͯ͠ͳ͍ • CSSϩʔμपΓinclude͓͏ ↓ࠓճͷ݁Ռ https://github.com/puku0x/angular-onsenui2-webpack2