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

本人是一個java web開發工程師，對angularjs4小有接觸，最近看到一個漂亮的angularjs4的後臺模板–angle，於是就在CSDN下載來測試一下，點選這裡下載

模板的一些照片

相信有經驗的都知道，要執行先安裝nodejs，配置nodejs環境等等，這裡就不細說了，網上有很多這樣的文章，而我參考的文章是，點選這裡

所有東西都搞掂了，然後就是打包部署，放在伺服器玩玩了，
下面就是我遇到的問題和解決辦法：
1、ng build 打包，載入的js檔案高達8.6M

ng build

在本地nginx或者tomcat直接執行，感覺還不錯，還以為就這麼的搞掂了，真的很開心！直接就把它用winFcp複製到自己阿里雲上，開啟主頁，瞬間懵逼了。好慢好慢，等了2分多鐘才打開了這個頁面。

肯定我這裡出問題，因為我上angle頁面demo是這樣子，demo官網，看下面的圖

於是我百度了一下，發現ng build是有模式選擇的，打包是用生產模式（–prod）

2、ng build –prod打包，這次優了點js 4.1M

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

這兩個程式碼是一樣，我也不知道開始–prod就預設開啟aot了
這裡，–prod引數後，angular-cli會把用不到的包都刪掉，而–aot引數是讓angular-cli啟動預編譯特性
在命令列中輸入這個程式碼，出現了問題了，報錯：Module not found: Error: Can’t resolve ‘./$$_gendir/app/app.module.ngfactory’
很多我找了到問題的解決辦法，

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

終於可以，看看效果如何，


少是少了很多，但遠遠不夠，問題出在哪呢？
能有什麼辦法？也只能繼續百度了，我發現了ng serve這段程式碼，ng serve是啟動一個小型web伺服器,用於託管應用。

ng serve --prod --aot

驚奇發現，js檔案只有1.1M比官網略優啊

那疑問就來了，難道我要在伺服器上架開發環境，好像不太現實吧。

3、nginx開啟gzip優化，這次js是1.2M

又開始了我的百度之旅，我發現了一個東西 — gzip，是在nginx上開啟gzip，優化訪問速度，文章在這裡

於是，我就在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括號裡面就可以了。
最後的結果，如下

但是，這好像和官網的demo還是有點差距啊，可能改以下gzip會有更好的效果，同時我還發現了一個問題，這個模板是把所有的東西都載入完才打開頁面，其實有的東西是可以後面再載入的，所以接下來我就要在模板自身來優化了。

等我找到更好的優化方法會及時更新，謝謝大家，如有錯誤，請指出

2017年9月15日晚上更新
在上個星期，我已經優化了不少了，


自從上次寫完這貼後，我就繼續上網搜一下優化方法，我找到一天文章說，先gzip壓縮到，然後再上傳到伺服器會快很多，我嘗試過，並沒有得到這樣的結論，在nginx上是可以開啟快取的功能的，它把專案gzip壓縮後，然後快取在伺服器上，每次開啟網站時，取的是gzip後的檔案，說明你壓縮再上傳和上傳後再配置壓縮是一樣的，並沒有得到優化。
有VPN的我，轉戰了google,
我找到了一個比我還努力的哥們，地址
這位哥們從7.07s優化到732ms，從4.5M優化到317.5kb全過程，測試網址是點選跳轉
其中有的是重複了，有的是不錯的做法，如下
（1）實現快取，實際操作過程，是在nginx中server上，添加了這段東西

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

    # 由於js和css檔案需要改動，設定的時間為5分鐘
    location ~* \.(css|js)$ {
          expires 5m;
          add_header Pragma public;
          add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    }

（2）更改了gzip壓縮引數，地址（可能是官網咖，反正做得很漂亮），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）我發現專案打包的時候出錯了，我把–AOT打成-AOT,一個一個符號只差就使得script.js這個檔案少了一半

現在這次網頁優化得比官網的還好了，如果還要弄的話，剩下的應該是減少了一下專案中沒用的公共模組，可能又可以 減少一半，那就非常滿意了，這個帖子算是終結了，主要是介紹了一下，我部署的全過程。