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
550
AngularとWebpackでAoTコンパイルするまでの話
@ngtool/webpackのAoTpプラグインを使ってAngularアプリを高速化しましょう、というお話です。
puku0x
April 26, 2017
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
340
Findyの開発生産性を上げるためにやったこと
puku0x
1
430
Angularコーディングスタイルガイドはいいぞ
puku0x
1
140
Nx CloudでCIを爆速にした話
puku0x
0
510
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.5k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
700
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
1.8k
Nxはいいぞ
puku0x
0
640
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
250
Other Decks in Technology
See All in Technology
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
630
ユーザーストーリーのレビューを自動化したみたの
bun913
1
310
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
人間の尊厳、幸福、アクセシビリティ / 第116回「WEB TOUCH MEETING」アクセシビリティSP
nulabinc
PRO
2
180
転移学習とドメイン適応の基礎
kmatsui
2
570
Aurora MySQL v3(MySQL8.0互換)の オンラインDDLの罠挙動を全バージョンで検証した
yutakikai
1
150
Terraformあれやこれ/terraform-this-and-that
emiki
4
290
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
210
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
The CloudCompare project by Dr. Daniel Girardeau-Montaut
kentaitakura
0
500
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.2k
巨大なテーブルのテーブル定義を無停止で安全に誰でも変更できるようにする / Table-definitions-for-huge-tables-can-be-modified-by-anyone-safely-and-non-disruptively
freee
1
730
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
It's Worth the Effort
3n
180
27k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
4 Signs Your Business is Dying
shpigford
175
21k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Side Projects
sachag
451
41k
How to name files
jennybc
64
92k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Building Your Own Lightsaber
phodgson
98
5.7k
Why Our Code Smells
bkeepers
PRO
331
56k
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