詳解angularjs4部署文件過大解決過程

這是我人生的第一篇文章，寫得不好，請(qǐng)見諒！

本人是一個(gè)java web開發(fā)工程師，對(duì)angularjs4小有接觸，最近看到一個(gè)漂亮的angularjs4的后臺(tái)模板–angle，于是就在CSDN下載來測試一下，點(diǎn)擊這里下載

模板的一些照片

相信有經(jīng)驗(yàn)的都知道，要運(yùn)行先安裝nodejs，配置nodejs環(huán)境等等，這里就不細(xì)說了，網(wǎng)上有很多這樣的文章，而我參考的文章是，點(diǎn)擊這里

所有東西都搞掂了，然后就是打包部署，放在服務(wù)器玩玩了， 

下面就是我遇到的問題和解決辦法：

1、ng build 打包，加載的js文件高達(dá)8.6M

ng build

在本地nginx或者tomcat直接運(yùn)行，感覺還不錯(cuò)，還以為就這么的搞掂了，真的很開心！直接就把它用winFcp復(fù)制到自己阿里云上，打開主頁，瞬間懵逼了。好慢好慢，等了2分多鐘才打開了這個(gè)頁面。

肯定我這里出問題，因?yàn)槲疑蟖ngle頁面demo是這樣子，看下面的圖

于是我百度了一下，發(fā)現(xiàn)ng build是有模式選擇的，打包是用生產(chǎn)模式（–prod）

2、ng build –prod打包，這次優(yōu)了點(diǎn)js 4.1M

ng build --prod
ng build --prod --aot

這兩個(gè)代碼是一樣，我也不知道開始–prod就默認(rèn)開啟aot了

這里，–prod參數(shù)后，angular-cli會(huì)把用不到的包都刪掉，而–aot參數(shù)是讓angular-cli啟動(dòng)預(yù)編譯特性

在命令行中輸入這個(gè)代碼，出現(xiàn)了問題了，報(bào)錯(cuò)：Module not found: Error: Can't resolve ‘./$$_gendir/app/app.module.ngfactory'

很多我找了到問題的解決辦法

是因?yàn)閍ngular-cli 的版本有點(diǎn)低了，通過下面的代碼來升到最新的版本

npm install --save-dev @angular/cli@latest

終于可以，看看效果如何，
 ‘

少是少了很多，但遠(yuǎn)遠(yuǎn)不夠，問題出在哪呢？

能有什么辦法？也只能繼續(xù)百度了，我發(fā)現(xiàn)了ng serve這段代碼，ng serve是啟動(dòng)一個(gè)小型web服務(wù)器,用于托管應(yīng)用。

ng serve --prod --aot

驚奇發(fā)現(xiàn)，js文件只有1.1M比官網(wǎng)略優(yōu)啊

那疑問就來了，難道我要在服務(wù)器上架開發(fā)環(huán)境，好像不太現(xiàn)實(shí)吧。

3、nginx開啟gzip優(yōu)化，這次js是1.2M

又開始了我的百度之旅，我發(fā)現(xiàn)了一個(gè)東西 — gzip，是在nginx上開啟gzip，優(yōu)化訪問速度

于是，我就在nginx上加了這段代碼

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";

文章中沒說這段東西放在哪，這里說以下，放在server括號(hào)里面就可以了。

最后的結(jié)果，如下

但是，這好像和官網(wǎng)的demo還是有點(diǎn)差距啊，可能改以下gzip會(huì)有更好的效果，同時(shí)我還發(fā)現(xiàn)了一個(gè)問題，這個(gè)模板是把所有的東西都加載完才打開頁面，其實(shí)有的東西是可以后面再加載的，所以接下來我就要在模板自身來優(yōu)化了。

等我找到更好的優(yōu)化方法會(huì)及時(shí)更新，謝謝大家，如有錯(cuò)誤，請(qǐng)指出

2017年9月15日晚上更新

在上個(gè)星期，我已經(jīng)優(yōu)化了不少了，

自從上次寫完這貼后，我就繼續(xù)上網(wǎng)搜一下優(yōu)化方法，我找到一天文章說，先gzip壓縮到，然后再上傳到服務(wù)器會(huì)快很多，我嘗試過，并沒有得到這樣的結(jié)論，在nginx上是可以開啟緩存的功能的，它把項(xiàng)目gzip壓縮后，然后緩存在服務(wù)器上，每次打開網(wǎng)站時(shí)，取的是gzip后的文件，說明你壓縮再上傳和上傳后再配置壓縮是一樣的，并沒有得到優(yōu)化。
有VPN的我，轉(zhuǎn)戰(zhàn)了google,

我找到了一個(gè)比我還努力的哥們，地址

這位哥們從7.07s優(yōu)化到732ms，從4.5M優(yōu)化到317.5kb全過程，測試網(wǎng)址是點(diǎn)擊跳轉(zhuǎn)

其中有的是重復(fù)了，有的是不錯(cuò)的做法，如下

（1）實(shí)現(xiàn)緩存，實(shí)際操作過程，是在nginx中server上，添加了這段東西

location ~* \.(gif|jpe?g|png|ico|swf)$ {
 # d - 天
 # h - 小時(shí)
 # m - 分鐘
 expires 168h;
 add_header Pragma public;
 add_header Cache-Control "public, must-revalidate, proxy-revalidate";
 }

 # 由于js和css文件需要改動(dòng)，設(shè)置的時(shí)間為5分鐘
 location ~* \.(css|js)$ {
   expires 5m;
   add_header Pragma public;
   add_header Cache-Control "public, must-revalidate, proxy-revalidate";
 }

（2）更改了gzip壓縮參數(shù)，地址（可能是官網(wǎng)吧，反正做得很漂亮），gzip的壓縮變成如下

gzip on;
 gzip_static on;
 gzip_comp_level 2;
 gzip_http_version 1.0;
 gzip_proxied any;
 gzip_min_length 1100;
 gzip_buffers 16 8k;
 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

 # Disable for IE < 6 because there are some known problems
 gzip_disable "MSIE [1-6].(?!.*SV1)";

 # Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
 gzip_vary on;

（3）我發(fā)現(xiàn)項(xiàng)目打包的時(shí)候出錯(cuò)了，我把–AOT打成-AOT,一個(gè)一個(gè)符號(hào)只差就使得script.js這個(gè)文件少了一半

現(xiàn)在這次網(wǎng)頁優(yōu)化得比官網(wǎng)的還好了，如果還要弄的話，剩下的應(yīng)該是減少了一下項(xiàng)目中沒用的公共模塊，可能又可以 減少一半，那就非常滿意了，這個(gè)帖子算是終結(jié)了，主要是介紹了一下，我部署的全過程。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。