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
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
550
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.2k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
230
ファインディでのGitHub Actions活用事例
puku0x
9
3.4k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
610
Angularコーディングスタイルガイドはいいぞ
puku0x
1
360
Nx CloudでCIを爆速にした話
puku0x
0
880
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
Other Decks in Technology
See All in Technology
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
880
今日から始めるAWSセキュリティ対策 3ステップでわかる実践ガイド
yoshidatakeshi1994
0
120
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
360
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
110
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
170
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.2k
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
2
210
いま注目のAIエージェントを作ってみよう
supermarimobros
0
360
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Statistics for Hackers
jakevdp
799
220k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Unsuck your backbone
ammeep
671
58k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
It's Worth the Effort
3n
187
28k
The Cult of Friendly URLs
andyhume
79
6.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Producing Creativity
orderedlist
PRO
347
40k
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