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

时间:2022-07-09 00:18:02

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 ;
server_name “域名或IP”;
location / {
root D:/project/images; // 服务器上图片资源存放的位置
autoindex on;
}
}

  3)设置nginx的压缩

// 这个一般在nginx.conf中进行配置,
gzip on;
gzip_min_length 1k;
gzip_buffers 16k;
gzip_comp_level ;
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全部加载进来,否则初始化启动会以为加载太多文件,网站访问会超级慢。只有当访问该模块的时候才去加载,否则不加载。如下:

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

如上图,只有访问登录(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 受益颇深