Angular4--提速--提高Angular項目的首頁打開速度（包含微信登陸優化）

Angular項目的首頁打開速度很慢，有時候會有幾秒的加載時間。若是在手機端訪問的話，怕是要等待十多秒，這對用戶體驗不好。下面參考http://www.cnblogs.com/feiyu159/p/8473790.html   介紹一下我本身的Angular優化之旅。

1、靜態圖片加載：

　　項目中存在不少圖片資源，有的圖片資源很大。若是和項目放在一塊兒的話，項目啓動時既要加載項目的html,css等靜態文件，對服務器的響應互有影響。考慮把圖片單獨存放，並使用nginx作映射。當請求頁面的圖片時，css和圖片就從兩個地方加載出來。這個好像大多數大型的網站都有，譬如百度官網地址：https://www.baidu.com,若是查看項目的源代碼就會發現，百度首頁的圖片時放在baidu.com下邊的一個子域名的文件夾下。那就暫且嘗試這樣實現一下好了。

　　1）建立圖片資源的服務器。

　　2）配置nginx

#圖片服務器 // 這是一個單獨的Server
server {
    listen       80;
    server_name  「域名或IP」;
    location / {
        root   D:/project/images; // 服務器上圖片資源存放的位置
        autoindex on;
        }
    }

　　3）設置nginx的壓縮

// 這個通常在nginx.conf中進行配置，
gzip  on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 2;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\."

2、Angular懶加載路由

　　懶加載，也就是按需加載。頁面啓動的時候，並非將所有的component所有加載進來，不然初始化啓動會覺得加載太多文件，網站訪問會超級慢。只有當訪問該模塊的時候纔去加載，不然不加載。以下：

 

如上圖，只有訪問登陸（Login）模塊的時候，項目纔會去加載Login模塊的component。

該項目能夠參考個人一個關於angular4快速啓動項目，github地址：https://github.com/JinGangRed/angular-my-quickly-start

3、與微信網頁受權相關

微信網頁受權過程當中，須要爲微信提供一個redirectURL。在angular項目中的這個地方就會有個分歧，這個redirect_url是放當前頁面的地址（login）呢，仍是登陸後的跳轉的地址？

其實咱們能夠採用後一種方式，直接賦值redirect_url爲登陸後跳轉的地址。

具體實現思路是這樣的：

　　1.訪問某個頁面(sell.component)，添加一個路由守衛canActivate: [AuthloadService] （請忽略這個名字的含義，由於這個AuthLoad會和路由守衛的是否加載子模塊的AuthLoad產生混淆，你能夠認爲他是一個判斷是否激活該組件的攔截器）在AuthLoadService中，

// 若是是微信跳轉請求該組件，會攜帶上code信息，這個時候獲取code，而後將這個code返回給後臺，讓後臺根據這個code，去獲取AccessToken和OpenId的信息
const code = route.queryParamMap.get('code');
    if (code) {
      alert('存在code ' + code);
      this.auth.getAccessTokenByWechat(code);
      this.auth.isLoggedIn = true;
    }
    return this.checkLogin(state.url);

　　2.在該路由守衛中，canActivate中 若是沒有訪問憑據的話，則設置NavigationExtras，配置參數targetURL，而後跳轉到登陸頁面。

　　3.在登陸頁面上，設置網頁受權鏈接上的redirect_url地址爲上一步驟配置的targetURL（這一步我已經實現）。

　　4.其實第三步，是否真的須要？應該能夠不須要登陸頁面這個組件，直接在第二個步驟中設置redirect_url爲當前地址不就能夠了嗎？這個我還沒實現，不敢妄下結論，待後期更新。

你們有什麼關於angular項目優化的好方法，請不吝賜教

很是感謝：http://www.cnblogs.com/feiyu159/p/8473790.html 受益頗深