{ "scripts": { "ngc": "ngc", "rollup": "rollup -f iife -c rollup.config.js -o dist/bundle-aot-es2015.js", "es5": "tsc --target es5 --allowJs dist/bundle-aot-es2015.js -out dist/bundle-aot.js", "minify-aot": "uglifyjs dist/bundle-aot.js --screw-ie8 --compress --mangle --output dist/bundle-aot.min.js", "prod-aot": "npm run ngc -- -p tsconfig-es2015.json && npm run tsc -- -p tsconfig-es2015.json && rollup && npm run es5 && npm run minify-aot" } }
最终只要运行一个命令即可：
npm run prod-aot
最后来看一下最终的文件大小：
ls -hl -rw-r--r-- 1 zhang staff 595K Nov 14 15:59 bundle-aot-es2015.js -rw-r--r-- 1 zhang staff 669K Nov 14 16:01 bundle-aot.js -rw-r--r-- 1 zhang staff 194K Nov 14 16:01 bundle-aot.min.js -rw-r--r-- 1 zhang staff 46K Nov 14 16:02 bundle-aot.min.js.gz -rw-r--r-- 1 zhang staff 1.4M Nov 14 15:54 bundle.js -rw-r--r-- 1 zhang staff 528K Nov 14 15:54 bundle.min.js -rw-r--r-- 1 zhang staff 129K Nov 14 16:02 bundle.min.js.gz
最终生成的 bundle-aot.min.js.gz 只有 46K ， 比没有使用 aot 编译的最终文件 bundle.min.js.gz 少了将近 2/3 ， 可以说 aot + tree shaking 效果非常的显著。
要看这一步的完整源代码， 请移步 GitHub 。
经过这样的终极编译优化编译之后， 应该可以放心的部署到生产环境了。
参考资料：