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

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

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

模板的一些照片

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

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

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

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

ng build

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

肯定我這里出問題，因為我上angle頁面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'

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

是因為angular-cli 的版本有點低了，通過下面的代碼來升到最新的版本

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這個文件少了一半

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。