详解为生产环境编译Angular2应用的方法( 二 )


这一步将会生成一系列*.ngfactory.ts *.module.metadata.json 临时文件,可以更新.gitignore 来忽略这些文件,避免对代码库造成污染;
2、将 typescript 文件编译成 es2015 (es6) 脚本;

详解为生产环境编译Angular2应用的方法


3、使用 rollup 进行 tree shaking,移除项目不使用的功能;
详解为生产环境编译Angular2应用的方法


4、再次使用 typescript 将 tree shaking 之后的脚本编译成 es5 脚本;
详解为生产环境编译Angular2应用的方法


5、使用 uglifyjs 再次压缩上一部生成的 es5 脚本;
详解为生产环境编译Angular2应用的方法


这几个命令对应的 npm 脚本如下:
详解为生产环境编译Angular2应用的方法


最终只要运行一个命令即可:
详解为生产环境编译Angular2应用的方法


最后来看一下最终的文件大小:
详解为生产环境编译Angular2应用的方法


最终生成的 bundle-aot.min.js.gz 只有 46K,比没有使用 aot 编译的最终文件 bundle.min.js.gz 少了将近 2/3,可以说 aottree shaking 效果非常的显著 。
要看这一步的完整源代码,请移步 GitHub。
经过这样的终极编译优化编译之后,应该可以放心的部署到生产环境了 。

推荐阅读