真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

發(fā)布Angular應(yīng)用至生產(chǎn)環(huán)境的方法

兩年前, 寫過(guò)一篇使用rollup 來(lái) 為生產(chǎn)環(huán)境編譯 Angular 2 應(yīng)用 的文章, 因?yàn)楫?dāng)時(shí)還沒(méi)有 angular-cli 項(xiàng)目。 而如今 Angular 已經(jīng)到了 7.x 版本, 對(duì)應(yīng)的工具也是非常的完善, 也就不在使用 rollup 來(lái)處理 angular 項(xiàng)目。

創(chuàng)新互聯(lián)自2013年創(chuàng)立以來(lái),公司以做網(wǎng)站、成都網(wǎng)站制作、系統(tǒng)開(kāi)發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計(jì)等為主要業(yè)務(wù),適用行業(yè)近百種。服務(wù)企業(yè)客戶上1000家,涉及國(guó)內(nèi)多個(gè)省份客戶。擁有多年網(wǎng)站建設(shè)開(kāi)發(fā)經(jīng)驗(yàn)。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。 通過(guò)專業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格,為不同客戶提供各種風(fēng)格的特色服務(wù)。

angular-cli 用起來(lái)雖然方便, 但是針對(duì)生產(chǎn)環(huán)境編譯的話, 還是有一些地方要注意的, 接下來(lái)就介紹我在項(xiàng)目部署時(shí)的一些做法。

合理拆分功能模塊, 按需加載

一個(gè)系統(tǒng)往往功能非常多, 因此就要根據(jù)項(xiàng)目的實(shí)際情況劃分功能模塊,一個(gè)功能模塊對(duì)應(yīng)一個(gè) NgModule , 編譯成一個(gè)獨(dú)立的 js 文件, 再結(jié)合 angular 的路由技術(shù)進(jìn)行按需加載,就這一功能點(diǎn)來(lái)說(shuō), angular 的支持已經(jīng)非常的完善了。

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]
  }
];

這一點(diǎn)經(jīng)常容易被忽視, 曾經(jīng)就出現(xiàn)過(guò)猶豫沒(méi)有合理劃分模塊, 導(dǎo)致編譯出來(lái)的 js 文件高達(dá) 5 兆, 造成的客戶體驗(yàn)非常差。 (甚至還出現(xiàn)開(kāi)發(fā)機(jī)內(nèi)存不足,無(wú)法成功編譯的情況)

預(yù)先壓縮 js 文件

當(dāng)然, 僅僅考合理劃分 js 模塊的話, 還往往不太夠, 因?yàn)閱蝹€(gè)模塊也可能會(huì)比較大, 可能會(huì)超過(guò) 1 兆, 特別是使用了一些第三方控件(ng-bootstrap, ng-zorro 等)的情況下。

針對(duì)這種情況, 通常還需要對(duì)編譯生成的 js 文件進(jìn)行 gzip 壓縮, 因此在執(zhí)行 ng build --prod 編譯之后, 再繼續(xù)執(zhí)行下面的 shell 命令:

find dist -name "*.js" -print0 | xargs -0 gzip -k

當(dāng)然, 如果發(fā)現(xiàn)編譯生成 css 文件比較大的話, 也可以通過(guò)下面的命令進(jìn)行壓縮:

find dist -name "*.css" -print0 | xargs -0 gzip -k

以一個(gè)僅僅使用了 ng-bootstrap 的模板項(xiàng)目為例, 生成的 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 , 而經(jīng)過(guò) gzip 壓縮之后, 文件大小顯著減?。?/p>

1.8K dist/ng-seed/4.1495aba38157395f4a2d.js
1.0K dist/ng-seed/4.1495aba38157395f4a2d.js.gz
1.7K dist/ng-seed/5.ec7eb27ea7c8eee53bcc.js
888B dist/ng-seed/5.ec7eb27ea7c8eee53bcc.js.gz
482K dist/ng-seed/main.6ee651175769ea64ed5f.js
124K dist/ng-seed/main.6ee651175769ea64ed5f.js.gz
 37K dist/ng-seed/polyfills.5d61d41949cb87471fa8.js
 12K dist/ng-seed/polyfills.5d61d41949cb87471fa8.js.gz
2.2K dist/ng-seed/runtime.c66e13242c809a55bd2f.js
1.2K dist/ng-seed/runtime.c66e13242c809a55bd2f.js.gz

main.6ee651175769ea64ed5f.js.gz 有 124KB , 只有原來(lái)的 1/4 。

一般來(lái)說(shuō), 對(duì)于 angular 項(xiàng)目編譯出的 js 文件, gzip 壓縮能減少 3/4 甚至 4/5 的體積, 這樣將會(huì)顯著減輕網(wǎng)絡(luò)傳輸?shù)膲毫Α?/p>

使用 nginx 作為服務(wù)器

為什么使用 nginx 作為前端服務(wù)器呢? 原因如下:

支持傳輸預(yù)先壓縮的 js 文件

將預(yù)先壓縮好的 .js.gz 和原來(lái)的 .js 文件一起上傳到服務(wù)器, 只要在 nginx 服務(wù)器的配置文件上加一句 gzip_static on; 即可啟用,這樣在客戶端請(qǐng)求 .js 文件時(shí), nginx 會(huì)先檢查一下是否存在對(duì)應(yīng)的 .js.gz 文件, 如果存在的話, 就直接返回 .js.gz 文件的內(nèi)容, 從而省去了在服務(wù)端進(jìn)行壓縮的過(guò)程, 節(jié)省服務(wù)器的資源。

location /ng-app {
  root  /usr/share/nginx/html;
  index index.html index.htm;
  gzip_static on;
  try_files $uri /ng-app/index.html;
}

作為后臺(tái)接口的網(wǎng)關(guān)

nginx 支持反向代理, 可以作為后臺(tái)接口的網(wǎng)關(guān), 這樣可以省去一些跨域調(diào)用 (cors) 的問(wèn)題, 一般的反向代理配置如下:

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 的官方鏡像, 部署、升級(jí)都是非常的方便。 不得不說(shuō)docker 確實(shí)是好東西, 用了就停不下來(lái)了。

這幾點(diǎn)都是在項(xiàng)目中積累的一些小技巧, 如果想要了解細(xì)節(jié), 請(qǐng)查看這個(gè)ng-seed 項(xiàng)目。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。


本文標(biāo)題:發(fā)布Angular應(yīng)用至生產(chǎn)環(huán)境的方法
本文鏈接:http://weahome.cn/article/jjggeo.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部