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壓縮