Building an Angular App for Production

Building an Angular App for Production Minko Gechev github.com/mgechev twitter.com/mgechev
blog.mgechev.com

Hold on for the second edition!

Inspirational thought about programming Agenda • Bundling • Minification •
Tree-shaking • AoT compilation • Compression

Building “Hello world” in Angular 2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body>
<my-app></my-app> <script src="/node_modules/zone.js/dist/zone.js"></script> <script src="/node_modules/reflect-metadata/Reflect.js"></script> <script src="dist/bundle.js"></script> </body> </html> index.html

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app',
template: 'Hello world!' }) export class AppComponent {}

import { NgModule } from '@angular/core'; import { BrowserModule }
from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [BrowserModule], bootstrap: [AppComponent], declarations: [AppComponent], }) export class AppModule {} app.module.ts

main.ts import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule
} from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

Bundling

“…standard practice aiming to reduce the number of requests that
the browser needs to perform in order to deliver the application requested by the user”

Less requests so our application gets faster

$ browserify -s main main.js > bundle.js

…one big blocking request

…okay but that’s a “Hello world” app

“Hello world” app in Angular 2

Building “Hello world” in Angular 2 with minimal size

Minification & Dead Code Elimination

Miniﬁcation & dead code elimination • Mangling • Rename variable
names • Rename property names • others… • Compression • Dead code elimination • Compress property access • Compress expressions • Pure functions • others…

Dead code elimination

dummy.js function answer() { const expr = true; if (expr)
{ return 42; } return 1.618; } console.log(answer());

function answer() { const expr = true; if (true) {
return 42; } return 1.618; } console.log(answer()); dummy.js

console.log(42); dummy.js

…usually we can get rid of small portions of unused
code

$ uglifyjs bundle.js --output bundle.min.js $ ls bundle.min.js 524K Oct
15 18:41 bundle.min.js

3x smaller but it’s still huge…

Bundling CommonJS Modules

index.js lib.js module.exports.foo = () => 'foo'; module.exports.bar = ()
=> 'bar'; const foo = require('./lib').foo; console.log(foo());

index.js module.exports.foo = () => 'foo'; module.exports.bar = () =>
'bar'; lib.js const foo = require('./lib').foo; console.log(foo());

index.js const foo = require('./lib').foo; console.log(foo()); lib.js module.exports.foo = ()
=> 'foo'; module.exports.bar = () => 'bar';

bundle.js module.exports.foo = () => 'foo'; module.exports.bar = () =>
'bar'; const foo = require('./lib').foo; console.log(foo());

Why is that?

index.js const readFile = require('fs').readFileSync; const funcName = readFile('name.txt') .toString().trim();
const fn = require('./lib')[funcName]; console.log(fn());

const readFile = require('fs').readFileSync; const funcName = readFile('name.txt') .toString().trim(); const
fn = require('./lib')[funcName]; console.log(fn()); index.js

CommonJS modules are hard for static code analysis because they
are dynamic

ES2015 modules are static so they can be statically analyzed
easier

lib.js index.js export foo = () => 'foo'; export bar
= () => 'bar'; import { foo } from './lib'; console.log(foo());

export foo = () => 'foo'; export bar = ()
=> 'bar'; import { foo } from './lib'; console.log(foo()); index.js lib.js

export foo = () => 'foo'; export bar = ()
=> 'bar'; import { foo } from `./${name}`; console.log(foo()); index.js lib.js

bundle.js let foo = () => 'foo'; console.log(foo());

ES2015 modules • Exports are always static • Identifiers •
Default exports • Imports are always static • Strings as paths • Importing specific symbols referenced by their identifiers • Wildcard (the entire module) • Importing the default export

Tree-shaking

…dropping unused exports

Tooling • Rollup.js • Supports ES2015 modules • Has plugin
for commonjs • Webpack 2 • Performs tree-shaking over ES2015 • Google Closure Compiler • Limited ES2015 modules support

Lets roll it up!

$ rollup -c config.js -o bundle.es2015.js $ tsc --target es5
--allowJs bundle.es2015.js $ uglifyjs bundle.js --output bundle.min.js $ ls bundle.min.js 502K Oct 15 18:41 bundle.min.js

tree-shaking templates

<div class="hero"></div> <div *ngIf="showLogin" class="login"> Existing users: <a href="#" [routerLink]="['login']">
Login here </a> </div> How many directives do we have here?

@Component({ selector: 'div.hero', template: '<h1>{{ hero.name }}' }) class SuperheroComponent
{ @Input() hero: Superhero; } superhero.component.ts

Login here </a> </div> How many directives do we have here?

At Runtime we know which directives are used in our
templates

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app',
template: 'Hello world!' }) export class AppComponent {}

NgIf, NgFor and other useless directives are still in our
bundle

We cannot truly tree-shake an Angular Application?

…of course we can…

Introducing ngc

Login here </a> </div>

import { NgIf, AppElement, TemplateRef_ } from "…"; ... this._anchor_11
= r.createTemplateAnchor(this._el_5,(null as any)); this._appEl_11 = AppElement(11,5,this,this._anchor_11); this._TemplateRef_11_5 = TemplateRef_(this._appEl_11, HeaderComponent1); this._NgIf_11_6 = NgIf(this._appEl_11.vcRef, this._TemplateRef_11_5); this._text_12 = r.createText(this._el_5,'\n ',(null as any)); ... <div class="hero"></div> <div *ngIf="showLogin" class="login"> Existing users: <a href="#" [routerLink]="['login']"> Login here </a> </div>

Angular’s Ahead-of-Time (AoT) compilation

AoT compilation Brings • Easy drop of unused components in
bundle • Code which is easy for dead-code elimination • Fast initial rendering • Components are distributed pre-compiled • Allows us to drop compiler from bundler • We compile ahead of time so we don’t need it runtime

$ ./node_modules/.bin/ngc -p tsconfig.json $ tsc -p tsconfig.json $ rollup
-c config.js -o bundle.es2015.js $ tsc --target es5 --allowJs bundle.es2015.js $ uglifyjs bundle.js --output bundle.min.js $ ls bundle.min.js 210K Oct 15 18:41 bundle.min.js

Disclaimer ngc will not always decrease your bundle size. For
large to medium applications the produced from the compilation JavaScript increases the app size.

Compression

Client Server

Client Server GET /app.js Accept-Encoding: deﬂate, br

Client Server GET /app.js Accept-Encoding: deﬂate, br HTTP/1.1 200 OK
Content-Encoding: br …

Client Server GET /app.js Accept-Encoding: deﬂate, br HTTP/1.1 200 OK
Content-Encoding: br … bro --decompress app.js

Popular algorithms • Deflate • Widely supported algorithm • Gzip
+ checksum in header/footer • Brotli • Similar runtime performance compared to deflate • Provides more dense compression compared to deflate • Not widely supported

$ bro --force --input b.js --output b.brotli $ ls b.brotli
39K Oct 15 18:38 b.brotli

36x smaller compared to the initial bundle!

lets try one more thing

Google Closure Compiler

/** * @param {string} name * @return {Superhero} */ function
heroFactory(name) { return new Superhero(name, 3); } hero.ts

$ tsickle function heroFactory(name: string) { return new Superhero(name, 3);
} /** * @param {string} name * @return {Superhero} */ function heroFactory(name) { return new Superhero(name, 3); }

tsickle transpiles TypeScript to Closure compatible annotations

$ ls bundle.brotli 39K Oct 15 18:38 b.brotli

$ ls bundle.brotli 32K Oct 15 18:38 bundle.brotli

Tools we used • tsc • Browserify • UglifyJS •
Rollup.js • ngc • Google Closure Compiler • Brotli

Here Here Here

…all this in angular-cli # build an app with env
config ng build --prod --env=prod …in angular-seed # build with AoT npm run build.prod.exp

Resources • mgv.io/ng-perf-checklist • mgv.io/build-ng-prod • mgv.io/mb-toolkit • mgv.io/n2cli •
mgv.io/ng-seed

mgv.io/ng4prod-feedback

Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com

Building an Angular App for Production

Building an Angular App for Production

More Decks by Minko Gechev

Other Decks in Programming

Featured

Transcript