Angular 4入門教程系列 18 編譯優化與nginx壓縮
angular使用缺省的方式進行ng build往往會生成一個幾M字節的vendor.bundle.js文件，使用–prod的選項進行編譯可以有效降低size，如果還不能滿足要求的話可以考慮結合nginx進行壓縮已達到目的。
兩種編譯：AOT vs JIT
| 縮寫 | 全稱 | 說明 | 特點 |
|---|---|---|---|
| AOT | Ahead Of Time Compilation | 預編譯 | 編譯器僅僅使用一組庫在構建期間運行一次 |
| JIT | Just in Time compiler | 即時編譯器 | 在每個用戶的每次運行期間都要用不同的庫運行一次 |
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 –prod –aot
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;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
確認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 ~]# - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
當然也可以通過使用諸如Chrome的F12的功能進行確認。
gzip_comp_level
通過設定gzip_comp_level，可以有效地降低vendor.bundle.js的大小，在實際的試驗中將其設定為2就得到過5倍壓縮比的案例，實際在使用的過程中可以根據自己的需要進行調節。
參考文件
https://www.angular.cn/guide/aot-compiler
http://nginx.org/en/docs/http/ngx_http_gzip_module.html#gzip
再分享一下我老師大神的人工智能教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智能的隊伍中來！https://blog.csdn.net/jiangjunshow
Angular 4入門教程系列 18 編譯優化與nginx壓縮