1
1
include ../_util-fns
2
2
3
3
:marked
4
- This cookbook describes how to radically improve performance by compiling _Ahead of Time_ (AoT )
4
+ This cookbook describes how to radically improve performance by compiling _Ahead of Time_ (AOT )
5
5
during a build process.
6
6
7
7
a#toc
8
8
:marked
9
9
## Table of Contents
10
10
* [Overview](#overview)
11
11
* [_Ahead-of-Time_ vs _Just-in-Time_](#aot-jit)
12
- * [Compile with AoT ](#compile)
12
+ * [Compile with AOT ](#compile)
13
13
* [Bootstrap](#bootstrap)
14
14
* [Tree Shaking](#tree-shaking)
15
15
* [Load the bundle](#load)
@@ -29,37 +29,37 @@ a#overview
29
29
:marked
30
30
<a href="https://www.youtube.com/watch?v=kW9cJsvcsGo" target="_blank">Watch compiler author Tobias Bosch explain the Angular Compiler</a> at AngularConnect 2016.
31
31
:marked
32
- You can compile the app in the browser, at runtime, as the application loads, using the **_Just-in-Time_ (JiT ) compiler**.
32
+ You can compile the app in the browser, at runtime, as the application loads, using the **_Just-in-Time_ (JIT ) compiler**.
33
33
This is the standard development approach shown throughout the documentation.
34
34
It's great .. but it has shortcomings.
35
35
36
- JiT compilation incurs a runtime performance penalty.
36
+ JIT compilation incurs a runtime performance penalty.
37
37
Views take longer to render because of the in-browser compilation step.
38
38
The application is bigger because it includes the Angular compiler
39
39
and a lot of library code that the application won't actually need.
40
40
Bigger apps take longer to transmit and are slower to load.
41
41
42
42
Compilation can uncover many component-template binding errors.
43
- JiT compilation discovers them at runtime which is later than we'd like.
43
+ JIT compilation discovers them at runtime which is later than we'd like.
44
44
45
- The **_Ahead-of-Time_ (AoT ) compiler** can catch template errors early and improve performance
45
+ The **_Ahead-of-Time_ (AOT ) compiler** can catch template errors early and improve performance
46
46
by compiling at build time as you'll learn in this chapter.
47
47
48
48
49
49
a#aot-jit
50
50
.l-main-section
51
51
:marked
52
- ## _Ahead-of-time_ (AoT ) vs _Just-in-time_ (JiT )
52
+ ## _Ahead-of-time_ (AOT ) vs _Just-in-time_ (JIT )
53
53
54
- There is actually only one Angular compiler. The difference between AoT and JiT is a matter of timing and tooling.
55
- With AoT , the compiler runs once at build time using one set of libraries;
56
- With JiT it runs every time for every user at runtime using a different set of libraries.
54
+ There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling.
55
+ With AOT , the compiler runs once at build time using one set of libraries;
56
+ With JIT it runs every time for every user at runtime using a different set of libraries.
57
57
58
- ### Why do AoT compilation?
58
+ ### Why do AOT compilation?
59
59
60
60
*Faster rendering*
61
61
62
- With AoT , the browser downloads a pre-compiled version of the application.
62
+ With AOT , the browser downloads a pre-compiled version of the application.
63
63
The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
64
64
65
65
*Fewer asynchronous requests*
@@ -75,20 +75,20 @@ a#aot-jit
75
75
76
76
*Detect template errors earlier*
77
77
78
- The AoT compiler detects and reports template binding errors during the build step
78
+ The AOT compiler detects and reports template binding errors during the build step
79
79
before users can see them.
80
80
81
81
82
82
*Better security*
83
83
84
- AoT compiles HTML templates and components into JavaScript files long before they are served to the client.
84
+ AOT compiles HTML templates and components into JavaScript files long before they are served to the client.
85
85
With no templates to read and no risky client-side HTML or JavaScript evaluation,
86
86
there are fewer opportunities for injection attacks.
87
87
88
88
a#compile
89
89
.l-main-section
90
90
:marked
91
- ## Compile with AoT
91
+ ## Compile with AOT
92
92
93
93
### Prepare for offline compilation
94
94
Take the <a href='../guide/setup.html'>Setup</a> as a starting point.
@@ -112,7 +112,7 @@ code-example(format='.').
112
112
113
113
`ngc` is a drop-in replacement for `tsc` and is configured much the same way.
114
114
115
- `ngc` requires its own `tsconfig.json` with AoT -oriented settings.
115
+ `ngc` requires its own `tsconfig.json` with AOT -oriented settings.
116
116
Copy the original `tsconfig.json` to a file called `tsconfig-aot.json`, then modify it to look as follows.
117
117
118
118
+ makeExample('cb-aot-compiler/ts/tsconfig-aot.json' , null , 'tsconfig-aot.json' )( format ='.' )
@@ -132,14 +132,14 @@ code-example(format='.').
132
132
:marked
133
133
***Component-relative Template URLS***
134
134
135
- The AoT compiler requires that `@Component` URLS for external templates and css files be _component-relative_.
135
+ The AOT compiler requires that `@Component` URLS for external templates and css files be _component-relative_.
136
136
That means that the value of `@Component.templateUrl` is a URL value _relative_ to the component class file.
137
137
For example, an `'app.component.html'` URL means that the template file is a sibling of its companion `app.component.ts` file.
138
138
139
- While JiT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AoT compilation.
139
+ While JIT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AOT compilation.
140
140
141
- JiT -compiled applications that use the SystemJS loader and _component-relative_ URLs *must set the* `@Component.moduleId` *property to* `module.id`.
142
- The `module` object is undefined when an AoT -compiled app runs.
141
+ JIT -compiled applications that use the SystemJS loader and _component-relative_ URLs *must set the* `@Component.moduleId` *property to* `module.id`.
142
+ The `module` object is undefined when an AOT -compiled app runs.
143
143
The app fails with a null reference error unless you assign a global `module` value in the `index.html` like this:
144
144
+ makeExample('cb-aot-compiler/ts/index.html' ,'moduleId' )( format ='.' )
145
145
.l-sub-section
@@ -149,7 +149,7 @@ code-example(format='.').
149
149
:marked
150
150
### Compiling the application
151
151
152
- Initiate AoT compilation from the command line using the previously installed `ngc` compiler by executing:
152
+ Initiate AOT compilation from the command line using the previously installed `ngc` compiler by executing:
153
153
code-example( format ='.' ) .
154
154
node_modules/.bin/ngc -p tsconfig-aot.json
155
155
.l-sub-section
@@ -171,8 +171,8 @@ code-example(format='.').
171
171
The curious can open the `aot/app.component.ngfactory.ts` to see the original Angular template syntax
172
172
in its intermediate, compiled-to-TypeScript form.
173
173
174
- JiT compilation generates these same _NgFactories_ in memory where they are largely invisible.
175
- AoT compilation reveals them as separate, physical files.
174
+ JIT compilation generates these same _NgFactories_ in memory where they are largely invisible.
175
+ AOT compilation reveals them as separate, physical files.
176
176
177
177
:marked
178
178
.alert.is-important
@@ -184,21 +184,21 @@ a#bootstrap
184
184
:marked
185
185
## Bootstrap
186
186
187
- The AoT path changes application bootstrapping.
187
+ The AOT path changes application bootstrapping.
188
188
189
189
Instead of bootstrapping `AppModule`, you bootstrap the application with the generated module factory, `AppModuleNgFactory`.
190
190
191
- Switch from the `platformBrowserDynamic.bootstrap` used in JiT compilation to
191
+ Switch from the `platformBrowserDynamic.bootstrap` used in JIT compilation to
192
192
`platformBrowser().bootstrapModuleFactory` and pass in the `AppModuleNgFactory`.
193
193
194
- Here is AoT bootstrap in `main.ts` next to the familiar JiT version:
194
+ Here is AOT bootstrap in `main.ts` next to the familiar JIT version:
195
195
196
196
+ makeTabs(
197
197
` cb-aot-compiler/ts/app/main.ts,
198
198
cb-aot-compiler/ts/app/main-jit.ts` ,
199
199
null ,
200
- ` app/main.ts (AoT ),
201
- app/main.ts (JiT )`
200
+ ` app/main.ts (AOT ),
201
+ app/main.ts (JIT )`
202
202
)
203
203
204
204
:marked
@@ -208,7 +208,7 @@ a#tree-shaking
208
208
:marked
209
209
## Tree Shaking
210
210
211
- AoT compilation sets the stage for further optimization through a process called _Tree Shaking_.
211
+ AOT compilation sets the stage for further optimization through a process called _Tree Shaking_.
212
212
A Tree Shaker walks the dependency graph, top to bottom, and _shakes out_ unused code like
213
213
dead needles in a Christmas tree.
214
214
@@ -219,9 +219,9 @@ a#tree-shaking
219
219
For example, this demo application doesn't use anything from the `@angular/forms` library.
220
220
There is no reason to download Forms-related Angular code and tree shaking ensures that you don't.
221
221
222
- Tree Shaking and AoT compilation are separate steps.
222
+ Tree Shaking and AOT compilation are separate steps.
223
223
Tree Shaking can only target JavaScript code.
224
- AoT compilation converts more of the application to JavaScript,
224
+ AOT compilation converts more of the application to JavaScript,
225
225
which in turn makes more of the application "Tree Shakable".
226
226
227
227
### Rollup
@@ -323,7 +323,7 @@ code-example(format='.').
323
323
a#source-code
324
324
.l-main-section
325
325
:marked
326
- ## AoT QuickStart Source Code
326
+ ## AOT QuickStart Source Code
327
327
328
328
Here's the pertinent source code:
329
329
+ makeTabs(
@@ -348,67 +348,67 @@ a#toh
348
348
## Tour of Heroes
349
349
350
350
The sample above is a trivial variation of the QuickStart app.
351
- In this section you apply what you've learned about AoT compilation and Tree Shaking
351
+ In this section you apply what you've learned about AOT compilation and Tree Shaking
352
352
to an app with more substance, the tutorial [_Tour of Heroes_](../tutorial/toh-pt6.html).
353
353
354
- ### JiT in development, AoT in production
354
+ ### JIT in development, AOT in production
355
355
356
- Today AoT compilation and Tree Shaking take more time than is practical for development. That will change soon.
357
- For now, it's best to JiT compile in development and switch to AoT compilation before deploying to production.
356
+ Today AOT compilation and Tree Shaking take more time than is practical for development. That will change soon.
357
+ For now, it's best to JIT compile in development and switch to AOT compilation before deploying to production.
358
358
359
359
Fortunately, the source code can be compiled either way without change _if_ you account for a few key differences.
360
360
361
361
***index.html***
362
362
363
- The JiT and AoT apps require their own `index.html` files because they setup and launch so differently.
364
- **Put the AoT version in the `/aot` folder** because two `index.html` files can't be in the same folder.
363
+ The JIT and AOT apps require their own `index.html` files because they setup and launch so differently.
364
+ **Put the AOT version in the `/aot` folder** because two `index.html` files can't be in the same folder.
365
365
366
366
Here they are for comparison:
367
367
368
368
+ makeTabs(
369
369
` toh-6/ts/aot/index.html,
370
370
toh-6/ts/index.html` ,
371
371
null ,
372
- ` aot/index.html (AoT ),
373
- index.html (JiT )`
372
+ ` aot/index.html (AOT ),
373
+ index.html (JIT )`
374
374
)
375
375
376
376
:marked
377
- The JiT version relies on `SystemJS` to load individual modules and requires the `reflect-metadata` shim.
377
+ The JIT version relies on `SystemJS` to load individual modules and requires the `reflect-metadata` shim.
378
378
Both scripts appear in its `index.html`.
379
379
380
- The AoT version loads the entire application in a single script, `aot/dist/build.js`.
380
+ The AOT version loads the entire application in a single script, `aot/dist/build.js`.
381
381
It does not need `SystemJS` or the `reflect-metadata` shim; those scripts are absent from its `index.html`
382
382
383
383
***main.ts***
384
384
385
- JiT and AoT applications boot in much the same way but require different Angular libraries to do so.
385
+ JIT and AOT applications boot in much the same way but require different Angular libraries to do so.
386
386
The key differences, covered in the [Bootstrap](#bootstrap) section above,
387
387
are evident in these `main` files which can and should reside in the same folder:
388
388
389
389
+ makeTabs(
390
390
` toh-6/ts/app/main-aot.ts,
391
391
toh-6/ts/app/main.ts` ,
392
392
null ,
393
- ` app/main-aot.ts (AoT ),
394
- app/main.ts (JiT )`
393
+ ` app/main-aot.ts (AOT ),
394
+ app/main.ts (JIT )`
395
395
)
396
396
397
397
:marked
398
398
***TypeScript configuration***
399
399
400
- JiT -compiled applications transpile to `commonjs` modules.
401
- AoT -compiled applications transpile to _ES2015_/_ES6_ modules to facilitate Tree Shaking.
402
- AoT requires its own TypeScript configuration settings as well.
400
+ JIT -compiled applications transpile to `commonjs` modules.
401
+ AOT -compiled applications transpile to _ES2015_/_ES6_ modules to facilitate Tree Shaking.
402
+ AOT requires its own TypeScript configuration settings as well.
403
403
404
404
You'll need separate TypeScript configuration files such as these:
405
405
406
406
+ makeTabs(
407
407
` toh-6/ts/tsconfig-aot.json,
408
408
toh-6/ts/tsconfig.json` ,
409
409
null ,
410
- ` tsconfig-aot.json (AoT ),
411
- tsconfig.json (JiT )`
410
+ ` tsconfig-aot.json (AOT ),
411
+ tsconfig.json (JIT )`
412
412
)
413
413
414
414
.callout.is-helpful
@@ -434,17 +434,17 @@ a#toh
434
434
435
435
.alert.is-important
436
436
:marked
437
- The general audience instructions for running the AoT build of the Tour of Heroes app are not ready.
437
+ The general audience instructions for running the AOT build of the Tour of Heroes app are not ready.
438
438
439
439
The following instructions presuppose that you have cloned the
440
440
<a href="https://github.com/angular/angular.io" target="_blank">angular.io</a>
441
441
github repository and prepared it for development as explained in the repo's README.md.
442
442
443
443
The _Tour of Heroes_ source code is in the `public/docs/_examples/toh-6/ts` folder.
444
444
:marked
445
- Run the JiT -compiled app with `npm start` as for all other JiT examples.
445
+ Run the JIT -compiled app with `npm start` as for all other JIT examples.
446
446
447
- Compiling with AoT presupposes certain supporting files, most of them discussed above.
447
+ Compiling with AOT presupposes certain supporting files, most of them discussed above.
448
448
+ makeTabs(
449
449
` toh-6/ts/aot/index.html,
450
450
toh-6/ts/aot/bs-config.json,
@@ -463,14 +463,14 @@ code-example(format='.').
463
463
"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
464
464
"lite:aot": "lite-server -c aot/bs-config.json",
465
465
:marked
466
- Copy the AoT distribution files into the `/aot` folder with the node script:
466
+ Copy the AOT distribution files into the `/aot` folder with the node script:
467
467
code-example( format ='.' ) .
468
468
node copy-dist-files
469
469
.l-sub-section
470
470
:marked
471
471
You won't do that again until there are updates to `zone.js` or the `core-js` shim for old browsers.
472
472
:marked
473
- Now AoT -compile the app and launch it with the `lite` server:
473
+ Now AOT -compile the app and launch it with the `lite` server:
474
474
code-example( format ='.' ) .
475
475
npm run build:aot && npm run lite:aot
476
476
0 commit comments