先来两张图对比一下两种方式的效果:
如上图,可以看到,如果编译的时候不加任何参数,那么打出来的包体积是非常庞大的。
以上是加上--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
如果给你带来帮助,欢迎微信或支付宝扫一扫,赞一下。

