使用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加载过程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略