ngmanila - codename: fireball - hello world in angular
Post on 20-Mar-2017
52 Views
Preview:
TRANSCRIPT
HELLO WORLD IN ANGULAR
Angular 2 Apps for Production
ABOUT ME
Iris Grace EndozoSoftware Engineer, Mobile WebFreelancer.com
irise@freelancer.com @IrisEndozo
A simple, unoptimized “Hello World” app bundle in Angular 2 is ~1.9MB!
What’s the plan?
Bundling and MinificationTree-shaking
AoT compilation
Hello World!
<!-- index.html --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <hello-world-app></hello-world—app> <script src=“/node_modules/zone.js/dist/zone.js"> </script> <script src="dist/bundle.js"></script></body></html>
// main.tsimport { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic';import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
// app.module.tsimport { 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.component.tsimport { Component } from '@angular/core';
@Component({ selector: ‘hello-world-app', template: 'Hello world!'})export class AppComponent {}
What’s the plan?
Bundling and Minification Browserify and UglifyJS
Tree-shakingAoT compilation
# Compile TS files using Typescript compiler to JS and # Build a bundle using Browserify
$ tsc && browserify -s main dist/main.js > dist/bundle.js
# Minify using Uglify
$ uglifyjs dist/bundle.js --compress —mangle --output dist/bundle.min.js
$ ls -lah dist/bundle.js-rw-r--r-- 1 Nesiri staff 1.9M Feb 19 02:47 dist/bundle.js
# Compile TS files using Typescript compiler to JS and # Build a bundle using Browserify
$ tsc && browserify -s main dist/main.js > dist/bundle.js
# Minify using Uglify
$ uglifyjs dist/bundle.js --compress --mangle --output dist/bundle.min.js
$ ls -lah dist/bundle.min.js-rw-r--r-- 1 Nesiri staff 582K Feb 19 03:01 dist/bundle.min.js
What’s the plan?Bundling and Minification
Tree-shaking Rollup.js
AoT compilation
Tree-shaking with Rollup.js
➤ supports ES2015 modules➤ excludes unused exports from bundles
import {Form} from './forms';import {Users} from './users';
const rl = readline.createInterface({ input: process.stdin, output: process.stdout});
rl.question(‘What is the type of user you want to get?’, answer => { const type = Users[answer]; type([1, 2, 3]); });
# Transpile TS files to ES2015
$ tsc -t ES2015
# Rollup to bundle the ES2015 modules, use config file at # rollup.config.js and output at bundle.es2015.js
$ rollup -c rollup.config.js -o dist/bundle.es2015.js
# Transpile resulting bundle to ES5
$ tsc --target es5 --allowJs dist/bundle.es2015.js —out dist/bundle.js
# Minify
$ uglifyjs dist/bundle.js --compress --mangle --output dist/bundle.min.js
# Transpile TS files to ES2015
$ tsc -t ES2015
# Rollup to bundle the ES2015 modules, use config file at # rollup.config.js and output at bundle.es2015.js
$ rollup -c rollup.config.js -o dist/bundle.es2015.js
# Transpile resulting bundle to ES5
$ tsc --target es5 --allowJs dist/bundle.es2015.js —out dist/bundle.js
# Minify
$ uglifyjs dist/bundle.js --compress --mangle --output dist/bundle.min.js
# Transpile TS files to ES2015
$ tsc -t ES2015
# Rollup to bundle the ES2015 modules, use config file at # rollup.config.js and output at bundle.es2015.js
$ rollup -c rollup.config.js -o dist/bundle.es2015.js
# Transpile resulting bundle to ES5
$ tsc --target es5 --allowJs dist/bundle.es2015.js --out dist/bundle.js
# Minify
$ uglifyjs dist/bundle.js --compress --mangle --output dist/bundle.min.js
# Transpile TS files to ES2015
$ tsc -t ES2015
# Rollup to bundle the ES2015 modules, use config file at # rollup.config.js and output at bundle.es2015.js
$ rollup -c rollup.config.js -o dist/bundle.es2015.js
# Transpile resulting bundle to ES5
$ tsc --target es5 --allowJs dist/bundle.es2015.js --out dist/bundle.js
# Minify
$ uglifyjs dist/bundle.js --compress --mangle --output dist/bundle.min.js
$ ls -lah dist/bundle.min.js-rw-r--r-- 1 Nesiri staff 532K Feb 19 04:14 dist/bundle.min.js
What’s the plan?Bundling and Minification
Tree-shakingAoT compilation
ngc
Ahead of Time Compilation
➤ Why?➤ Faster rendering - no need to wait for the app to be compiled
before executing code➤ Smaller NG framework download - no need for the NG
compiler as the stuff is already compiled, drastically reducing the size of NG needed
➤ Template error detection - template binding errors are determined during build steps
# Compile application (including HTML templates) to TS
$ ngc -p tsconfig.json && cp app/* compiled
# Transpile TS files to ES2015
$ tsc -p tsconfig-tsc.json --rootDir compiled
# Treeshaking with Rollup.js
$ rollup -c rollup.config.js -o dist/bundle.es2015.js
# Transpile resulting bundle to ES5
$ tsc --target es5 --allowJs dist/bundle.es2015.js —out dist/bundle.js
# Minify
$ uglifyjs dist/bundle.js --compress --mangle --output dist/bundle.min.js
# Compile application (including HTML templates) to TS
$ ngc -p tsconfig.json && cp app/* compiled
# Transpile TS files to ES2015
$ tsc -p tsconfig-tsc.json --rootDir compiled
# Treeshaking with Rollup.js
$ rollup -c rollup.config.js -o dist/bundle.es2015.js
# Transpile resulting bundle to ES5
$ tsc --target es5 --allowJs dist/bundle.es2015.js —out dist/bundle.js
# Minify
$ uglifyjs dist/bundle.js --compress --mangle --output dist/bundle.min.js
# Compile application (including HTML templates) to TS
$ ngc -p tsconfig.json && cp app/* compiled
# Transpile TS files to ES2015
$ tsc -p tsconfig-tsc.json --rootDir compiled
# Treeshaking with Rollup.js
$ rollup -c rollup.config.js -o dist/bundle.es2015.js
# Transpile resulting bundle to ES5
$ tsc --target es5 --allowJs dist/bundle.es2015.js —out dist/bundle.js
# Minify
$ uglifyjs dist/bundle.js --compress --mangle --output dist/bundle.min.js
# Compile application (including HTML templates) to TS
$ ngc -p tsconfig.json && cp app/* compiled
# Transpile TS files to ES2015
$ tsc -p tsconfig-tsc.json --rootDir compiled
# Treeshaking with Rollup.js
$ rollup -c rollup.config.js -o dist/bundle.es2015.js
# Transpile resulting bundle to ES5
$ tsc --target es5 --allowJs dist/bundle.es2015.js —out dist/bundle.js
# Minify
$ uglifyjs dist/bundle.js --compress --mangle --output dist/bundle.min.js
# Compile application (including HTML templates) to TS
$ ngc -p tsconfig.json && cp app/* compiled
# Transpile TS files to ES2015
$ tsc -p tsconfig-tsc.json --rootDir compiled
# Treeshaking with Rollup.js
$ rollup -c rollup.config.js -o dist/bundle.es2015.js
# Transpile resulting bundle to ES5
$ tsc --target es5 --allowJs dist/bundle.es2015.js —out dist/bundle.js
# Minify
$ uglifyjs dist/bundle.js --compress --mangle --output dist/bundle.min.js
$ ls -lah dist/bundle.min.js-rw-r--r-- 1 Nesiri staff 199K Feb 19 06:25 dist/bundle.min.js
$ ls -lah dist/bundle.min.js-rw-r--r-- 1 Nesiri staff 582K Feb 19 03:01 dist/bundle.min.js
$ ls -lah dist/bundle.min.js-rw-r--r-- 1 Nesiri staff 199K Feb 19 06:25 dist/bundle.min.js
Reduced it by 65%!
All of these are in Angular CLI!
https://github.com/angular/angular-cli
# Build app with production configng build --prod --env=prod
Thanks and Qs?Related stuff:
https://angular.io/docs/ts/latest/cookbook/aot-compiler.htmlhttps://www.typescriptlang.org/docs/handbook/compiler-options.html
https://github.com/angular/angular-cli#usagehttps://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-
elimination-d3765df85c80#.p47uwmwevhttp://rollupjs.org/guide/#what-is-rollup
top related