Why AOT

使用AOT有如下好处：

渲染得更快 
需要的异步请求更少 
需要下载的Angular框架体积更小 
提早检测模板错误 
更安全，降低注入攻击的机会

使用方法

prod选项和aot选项，在目前的版本中，ng build –prod或者ng build –prod –aot基本上都能较为显著的降低生成的vendor.bundle.js等文件的尺寸，按照官方的说明据说可以将其从几M字节降到几百K字节大小。但在实际中，似乎有的时候很难达到这一目标，根据情况将5M的vendor.bundle.js降到2.5M左右的程度还是没有问题的，具体使用的命令如下：

ng build --aot

进一步压缩，使用如下命令

 

ng build --prod --build--optimizer

nginx压缩

如果单独–prod –aot的选项无法达到预期目的，可以考虑结合nginx的gzip选项进行设定，以保证速度。

作用范围

在nginx的设定文件中，gzip一般可以在如下几种区域内进行设定

http 
server 
location

常用参数设定

项目	取值	说明
gzip	on	off
gzip_comp_level	1-9	压缩级别(级别越高,压缩率越高)
gzip_disable	正则匹配串	不进行gzip的URI
gzip_min_length	最小长度	低于此值得文件不进行压缩
gzip_types	text/plain application/xml等	压缩对象文件类型
gzip_vary	on	off

压缩对象的常见类型：

text/plain 
application/x-javascript 
application/javascript 
text/css 
application/xml 
text/javascript 
application/x-httpd-php 
image/jpeg 
image/gif 
image/png

示例

以下为server中设定gzip的一个实例

server {
    listen       80;
    server_name  localhost;

    gzip on;
    gzip_min_length 50k;
    gzip_buffers 4 16k;
    gzip_comp_level 5;    gzip_types application/javascript;
    gzip_vary off;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

确认gzip是否开启

上述示例用来说明大于50k的javascript文件才会进行压缩，使用如下curl命令则可以确认是否真正开启。

[root@devops ~]# curl -I -H "Accept-Encoding: gzip" "http://192.168.163.153:32032/vendor.bundle.js"
HTTP/1.1 200 OK
Server: nginx/1.13.5
Date: Mon, 11 Dec 2017 13:35:07 GMT
Content-Type: application/javascript
Last-Modified: Sun, 10 Dec 2017 12:31:28 GMT
Connection: keep-alive
ETag: W/"5a2d2920-56efa5"
Content-Encoding: gzip

[root@devops ~]# 

当然也可以通过使用诸如Chrome的F12的功能进行确认。 

gzip_comp_level

通过设定gzip_comp_level，可以有效地降低vendor.bundle.js的大小，在实际的试验中将其设定为2就得到过5倍压缩比的案例，实际在使用的过程中可以根据自己的需要进行调节。

ng build --prod --aot

进一步压缩，使用如下命令