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
590
AngularとWebpackでAoTコンパイルするまでの話
@ngtool/webpackのAoTpプラグインを使ってAngularアプリを高速化しましょう、というお話です。
puku0x
April 26, 2017
Tweet
Share
More Decks by puku0x
See All by puku0x
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.2k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
220
ファインディでのGitHub Actions活用事例
puku0x
9
3.4k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
600
Angularコーディングスタイルガイドはいいぞ
puku0x
1
350
Nx CloudでCIを爆速にした話
puku0x
0
870
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
870
Other Decks in Technology
See All in Technology
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
220
「AI2027」を紐解く ― AGI・ASI・シンギュラリティ
masayamoriofficial
0
110
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
390
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
nextbeatdev
0
160
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
1
320
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
4
4.7k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
680
事業価値と Engineering
recruitengineers
PRO
3
2.5k
ゆるふわエンジニアでもAIフローにチャレンジしたい!!~Zapierのすゝめ~
masakiokuda
2
100
AIエージェント就活入門 - MCPが履歴書になる未来
eltociear
0
580
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
4
670
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Designing Experiences People Love
moore
142
24k
Site-Speed That Sticks
csswizardry
10
790
Navigating Team Friction
lara
189
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
GitHub's CSS Performance
jonrohan
1031
460k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
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