Angular4--提速--提升Angular项目的首页打开速度（包含微信登录优化）

Angular项目的首页打开速度很慢，有时候会有几秒的加载时间。如果在手机端访问的话，怕是要等待十多秒，这对用户体验很差。下面参考http://www.cnblogs.com/feiyu159/p/8473790.html   介绍一下我自己的Angular优化之旅。

一、静态图片加载：

　　项目中存在很多图片资源，有的图片资源很大。如果和项目放在一起的话，项目启动时既要加载项目的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]\."

二、Angular懒加载路由

　　懒加载，也就是按需加载。页面启动的时候，并不是将全部的component全部加载进来，否则初始化启动会以为加载太多文件，网站访问会超级慢。只有当访问该模块的时候才去加载，否则不加载。如下：

 

如上图，只有访问登录（Login）模块的时候，项目才会去加载Login模块的component。

该项目可以参考我的一个关于angular4快速启动项目，github地址：https://github.com/JinGangRed/angular-my-quickly-start

三、与微信网页授权相关

微信网页授权过程中，需要为微信提供一个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 受益颇深