兩年前， 寫過一篇使用rollup 來 為生產環境編譯 Angular 2 應用 的文章， 因為當時還沒有 angular-cli 項目。 而如今 Angular 已經到了 7.x 版本， 對應的工具也是非常的完善， 也就不在使用 rollup 來處理 angular 項目。
angular-cli 用起來雖然方便， 但是針對生產環境編譯的話， 還是有一些地方要注意的， 接下來就介紹我在項目部署時的一些做法。
合理拆分功能模塊， 按需加載
一個系統往往功能非常多， 因此就要根據項目的實際情況劃分功能模塊，一個功能模塊對應一個 NgModule ， 編譯成一個獨立的 js 文件， 再結合 angular 的路由技術進行按需加載，就這一功能點來說， angular 的支持已經非常的完善了。
const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', loadChildren: './home/home.module#HomeModule' }, { path: 'about', loadChildren: './about/about.module#AboutModule' }, { path: 'arcgis', loadChildren: './arcgis/arcgis.module#ArcgisModule', canLoad: [EsriLoaderGuard] }];這一點經常容易被忽視， 曾經就出現過猶豫沒有合理劃分模塊， 導致編譯出來的 js 文件高達 5 兆， 造成的客戶體驗非常差。 （甚至還出現開發機內存不足，無法成功編譯的情況）
預先壓縮 js 文件
當然， 僅僅考合理劃分 js 模塊的話， 還往往不太夠， 因為單個模塊也可能會比較大， 可能會超過 1 兆， 特別是使用了一些第三方控件（ng-bootstrap, ng-zorro 等）的情況下。
針對這種情況， 通常還需要對編譯生成的 js 文件進行 gzip 壓縮， 因此在執行 ng build --prod 編譯之后， 再繼續執行下面的 shell 命令：
find dist -name "*.js" -print0 | xargs -0 gzip -k
當然， 如果發現編譯生成 css 文件比較大的話， 也可以通過下面的命令進行壓縮：
find dist -name "*.css" -print0 | xargs -0 gzip -k
以一個僅僅使用了 ng-bootstrap 的模板項目為例， 生成的 js 文件如下所示：
1.8K dist/ng-seed/4.1495aba38157395f4a2d.js 1.7K dist/ng-seed/5.ec7eb27ea7c8eee53bcc.js 482K dist/ng-seed/main.6ee651175769ea64ed5f.js 37K dist/ng-seed/polyfills.5d61d41949cb87471fa8.js 2.2K dist/ng-seed/runtime.c66e13242c809a55bd2f.js
其中的 main.6ee651175769ea64ed5f.js 就有 482KB ， 而經過 gzip 壓縮之后， 文件大小顯著減小：
1.8K dist/ng-seed/4.1495aba38157395f4a2d.js1.0K dist/ng-seed/4.1495aba38157395f4a2d.js.gz1.7K dist/ng-seed/5.ec7eb27ea7c8eee53bcc.js888B dist/ng-seed/5.ec7eb27ea7c8eee53bcc.js.gz482K dist/ng-seed/main.6ee651175769ea64ed5f.js124K dist/ng-seed/main.6ee651175769ea64ed5f.js.gz 37K dist/ng-seed/polyfills.5d61d41949cb87471fa8.js 12K dist/ng-seed/polyfills.5d61d41949cb87471fa8.js.gz2.2K dist/ng-seed/runtime.c66e13242c809a55bd2f.js1.2K dist/ng-seed/runtime.c66e13242c809a55bd2f.js.gz
main.6ee651175769ea64ed5f.js.gz 有 124KB ， 只有原來的 1/4 。
一般來說， 對于 angular 項目編譯出的 js 文件， gzip 壓縮能減少 3/4 甚至 4/5 的體積， 這樣將會顯著減輕網絡傳輸的壓力。
使用 nginx 作為服務器
為什么使用 nginx 作為前端服務器呢？ 原因如下：
支持傳輸預先壓縮的 js 文件
將預先壓縮好的 .js.gz 和原來的 .js 文件一起上傳到服務器， 只要在 nginx 服務器的配置文件上加一句 gzip_static on; 即可啟用，這樣在客戶端請求 .js 文件時， nginx 會先檢查一下是否存在對應的 .js.gz 文件， 如果存在的話， 就直接返回 .js.gz 文件的內容， 從而省去了在服務端進行壓縮的過程， 節省服務器的資源。
location /ng-app { root /usr/share/nginx/html; index index.html index.htm; gzip_static on; try_files $uri /ng-app/index.html;}作為后臺接口的網關
nginx 支持反向代理， 可以作為后臺接口的網關， 這樣可以省去一些跨域調用 (cors) 的問題， 一般的反向代理配置如下：
location /api { proxy_pass http://api-server:8080/api; proxy_read_timeout 600s; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme;}官方的 docker 鏡像
nginx 有 docker 的官方鏡像， 部署、升級都是非常的方便。 不得不說docker 確實是好東西， 用了就停不下來了。
這幾點都是在項目中積累的一些小技巧， 如果想要了解細節， 請查看這個ng-seed 項目。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
