【重要】启用AOT+TreeShaking+Gzip大幅度压缩Angular2应用的体积

先来两张图对比一下两种方式的效果：

如上图，可以看到，如果编译的时候不加任何参数，那么打出来的包体积是非常庞大的。

以上是加上--prod和--aot打包参数之后的效果。

ng build --prod --aot

加上--prod参数之后，angular-cli会自动启用TreeShaking（摇树）特性，简而言之，就是把用不到的包全部剔除掉，就像从树上把枯叶子摇下来一样，很形象吧？加上--aot参数是让angular-cli启动预编译特性。

angular-cli会在项目根目录下生成一个dist目录，里面就是编译、压缩好的文件了。仔细观察你会发现，这些文件的体积已经被大幅度压缩，加上gzip之后有一些文件只剩下1/4左右的大小。

在开发状态也可以加上--prod和--aot参数来测试效果，用法如下：

ng serve --prod --aot

【请注意】最新版本的angular-cli已经内置了对AOT和TreeShaking的支持，只要像上面这样在build的时候加上--prod和--aot参数就可以了，不需要再做任何其它任何配置工作，官方网站上的那一篇指南有点过时了。

那么，在生产环境的Server上如何启用gzip呢，以Tomcat7为例，请打开Tomcat安装目录下config/server.xml，在Connector项目里面加上以下几个属性：

    <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" 
			   compression="on"
			   compressionMinSize="2048"
			   noCompressionUserAgents="gozilla, traviata"
			   compressableMimeType="text/html,text/xml,text/plain,text/css,
					text/javascript,text/json,application/x-javascript,
					application/javascript,application/json"/>

这样就可以自动加载gzip压缩之后的版本了。

(文/大漠穷秋)

本文来源：https://my.oschina.net/mumu/blog/830742

如果给你带来帮助，欢迎微信或支付宝扫一扫，赞一下。