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
570
AngularとWebpackでAoTコンパイルするまでの話
@ngtool/webpackのAoTpプラグインを使ってAngularアプリを高速化しましょう、というお話です。
puku0x
April 26, 2017
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディでのGitHub Actions活用事例
puku0x
9
1.9k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
390
Findyの開発生産性を上げるためにやったこと
puku0x
1
500
Angularコーディングスタイルガイドはいいぞ
puku0x
1
200
Nx CloudでCIを爆速にした話
puku0x
0
630
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
740
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.2k
Nxはいいぞ
puku0x
0
690
Other Decks in Technology
See All in Technology
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
210
Creative UIs with Compose: DroidKaigi 2024
chrishorner
1
150
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
40k
エンジニア向け会社紹介資料
caddi_eng
15
250k
Monitor GraalVM Native Apps with OpenTelemetry
logico_jp
0
120
ロボットアームを遠隔制御の話 & LLMをつかったIoTの話もしたい
soracom
PRO
1
250
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
320
EitherT_with_Future
aoiroaoino
1
980
RAGHack: Building RAG apps in Python
pamelafox
0
160
20240912 JJUGナイトセミナー
mii1004
0
120
ビジネスとエンジニアリングを繋ぐプロダクトを中心とした組織づくりの実践
sansantech
PRO
1
150
SAVEPOINT α版
savepoint
0
600
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Into the Great Unknown - MozCon
thekraken
28
1.4k
Making Projects Easy
brettharned
113
5.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
590
Docker and Python
trallard
39
3k
Side Projects
sachag
451
42k
For a Future-Friendly Web
brad_frost
174
9.3k
Unsuck your backbone
ammeep
667
57k
Typedesign – Prime Four
hannesfritz
39
2.3k
Documentation Writing (for coders)
carmenintech
65
4.3k
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