比尔云BierYun--阿里云最新优惠活动
阿里云优惠码丨阿里云代金券

Angular前端优化思路

Angular前端优化思路

Angular

简单总结接下我这边angular前端优化步骤都是满满的干货,各位客官有好的改进欢迎留言~

1. 动静分离

项目里面前端比较占用带宽的一般都是加载静态资源,请求后台接口一般占用带宽都是1kb左右,但是在加载静态资源往往会达到mb级别,占用大量带宽,明现影响了业务,所以动静分离是必须而且必要做的,angualr里面也会有指令来指定加载静态资源路径从而动静分离

1
ng build --deployUrl=指定域名/

2.js ,css 代码压缩

angular编译的js基本都很大达到了mb级别,加载起来很占用带宽,不过angualr也提供了编译时压缩代码的功能,angular build指定为 –prod即可,你会发现压缩后代码成倍数的变小很恐怖哦,不过prod编译检查比较严格,会出现很多报错,另外这里多说一嘴,我自己也测试比较过,angular项目设置懒加载策略,压缩后的js还会进一步变小

1
2
3
4
5
export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
     // 注释下面这一行可以激活延迟加载策略
  // preloadingStrategy: PreloadAllModules,
   // useHash: true
});

3.CDN加速

CND加速不用多说了也是必要优化步骤,可以自行百度,现在国内的共有云平台都有CND加速服务,腾讯云是免费使用

4.nginx缓存

一般做到上面3步,基本可以实现页面秒开了,但是打开页面还是会有请求服务器资源端会占用服务器端带宽,如果需要进一步优化可将一些访问量高的页面做nginx缓存,这样就不会走服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
events {
  #的最大连接数(包含所有连接数)1024
  worker_connections  1024;  ## Default: 1024
}
http{
   # 代理缓存配置 nginx根目录指定缓存文件夹 kawa_cachedata名字自己定义跟proxy_cache_path对应上
   proxy_cache_path "./kawa_cachedata"  levels=1:2 keys_zone=kawacache:256m inactive=1d max_size=1000g;
   server {
     listen 80;
     location /{
        #使用缓存名称
        proxy_cache kawacache;
        #对以下状态码实现缓存
        proxy_cache_valid 200 206 304 301 302 1d;
        #缓存的key为url地址
        proxy_cache_key $request_uri;
        add_header X-Cache-Status $upstream_cache_status;
        #反向代理地址
        proxy_pass http://127.0.0.1:8080;
      }
  
   }
}

上面的nginx配置基本就可以缓存页面了,如果页面修改需要刷新缓存就在url后面追加新的时间戳就可以了

原文地址https://www.cnblogs.com/hlkawa/p/11877017.html

相关推荐

  • 暂无文章

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

强烈推荐

高性能SSD云服务器ECS抗攻击,高可用云数据库RDS