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 受益颇深