13. 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]);
});
14. # 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
15. # 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
16. # 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
17. # 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
19. 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