使用nginx对特定js请求进行转发,加速js加载过程

2021/5/3 7:29:02

本文主要是介绍使用nginx对特定js请求进行转发,加速js加载过程,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

在项目中内嵌了一个iframe,iframe加载过程中有个js,经过压缩后大约有10M。这极大地减慢了页面加载的速度,由于这个js是固定的,并不会改变,所以采用静态资源的形式使用nginx加速存取。

1.目标js的url

目标js的url:http://localhost/myapp/myprefix/username/static/lab/xxxxxx.js
这个js我们可以拆分成三个部分:

  • 第一部分:http://localhost/myapp/myprefix 这一部分是固定的,每一次请求都是这个前缀
  • 第二部分:/username 这一中间部分是变量,每一个不同的用户进行请求都不相同
  • 第三部分:/static/lab/xxxxxx.js 这是最后的后缀部分,每个请求也是相同的

由此可见,我们对于这些js的转发关键就是在于怎么将用户名这一变量排除在我们nginx的正则规则之外。

2.nginx的location内转发规则

location中有几个常用的转发关键词,我们分别简单看一下用法:

  • proxy_pass
  • root
  • rewrite
  • alias

由于我们这里只需要把js转发出去,所以匹配到对应的url后使用alias是最简便的

3.正则的匹配

	// 使用如下正则即可
	location ~ ^(.+)/(.+)/(.+)/static/lab/(.+)$ {
		alias /data/$4;
	}
	// 将js文件放到/data目录下即可
	// 如果对nginx转发的情况想多了解一下可以查看日志
	// /var/log/nginx/access.log   正常转发的日志
	// /var/log/nginx/error.log    nginx转发出错的日志

正则匹配规则
简单地学一些正则:

  • ^ 代表以什么开头的匹配
  • $ 代表以什么结尾的匹配
  • ~ 代表区分大小写匹配

了解这些对于本需求就足够了,有更复杂的应用场景可以多学一点正则!



这篇关于使用nginx对特定js请求进行转发,加速js加载过程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程