添加Nginx http_concat模块优化前端Js性能

今天药忘吃喽~ 2022-05-28 10:21 137阅读 0赞

声明：本博文用于学习总结及工作心得

**环境:**

Ubuntu16.04、Tomcat7、Nginx 1.5.6

**发现问题**：

最近在生产服务器使用过程中，发现一个以前被忽略的问题；项目中如果存在大量的js,css或者其它一些静态资源，每次访问的时候，都需要发出大量的请求，造成加载速度过慢；

一般情况我们使用开发者模式，就可以查看浏览器发出的每一个请求的耗时情况；而在项目中，当用户登录时，加载index.jsp的时候，浏览器就会发送大量的请求，通过开发者模式可以看出，都是一些js,css,以及一些其它的静态资源文件；通过多次测试，加载耗时平均在10s左右；虽然，这些静态资源都是异步加载，但是由于请求太多，还是会照成客户体验效果差，而且还会影响其它功能的加载

**解决问题：**

使用 nginx\_http\_concat模块合并多个静态资源的请求，减少浏览器发出的请求，可以大大加快浏览器的加载速度；想象一下，当你的项目中，有成千上万个静态资源时，没有使用nginx\_http\_concat模块之前，你需要发送多少个请求？使用nginx\_http\_concat模块时，可能只需要发送几十个或者几个请求，这个根据你的需求来，比如在我的项目中，js文件是按照模块划分，在nginx没有添加concat模块前，每次用户登录需要加载白多个js等静态资源文件；而添加concat模块以后，我按照模块划分只需要每个模块发送一个请求，大大减少了这方面的网络开销。当然请求耗时是非常可观的，甚至比普通加载单个文件耗时更少

1.模块介绍：

该模块是由淘宝技术团队发布在github上，用来合并多个静态文件的请求为一个请求，减少服务器被访问的次数。

2.下载nginx\_http\_concat模块

git clone git://github.com/alibaba/nginx-http-concat.git

3.重新编译nginx

移动模块到 /etc/nginx/third-modules中，third-modules是专门用来存放nginx添加模块的源文件的

mv nginx-http-concat/ /etc/nginx/third-modules/

根据你现有的nginx版本，去下载源码，如果你想升级nginx，也可以下载高版本的nginx源码

之前在服务器中，因为需要添加nginx-accesskey模块，所以当时我已经升级过nginx到1.5.6

解压nginx源码

tar -zxvf /root/nginx-1.5.6

进入目录

cd /root/nginx-1.5.6.

如果以前编译过源码 请执行

make clean

获取当前nginx的所拥有的模块：

nginx -V

输出：

nginx version: nginx/1.5.6
    built by gcc 5.4.0 20160609 (Ubuntu 5.4.0-6ubuntu1~16.04.4)
    TLS SNI support enabled
    configure arguments: --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-log-path=/var/log/nginx/access.log --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi --lock-path=/var/lock/nginx.lock --pid-path=/var/run/nginx.pid --with-http_realip_module --with-http_stub_status_module --with-http_ssl_module --with-debug --with-http_addition_module --with-http_dav_module --with-http_geoip_module --with-http_gzip_static_module --with-http_realip_module --with-http_stub_status_module --with-http_ssl_module --with-http_sub_module --with-http_xslt_module --with-ipv6 --with-sha1=/usr/include/openssl --with-md5=/usr/include/openssl --with-mail --with-mail_ssl_module --add-module=/etc/nginx/third-modules/nginx-accesskey-2.0.3

执行./configure 生成编译时所需要的Makefile文件 同时加上你需要添加的模块

./configure --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-log-path=/var/log/nginx/access.log --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi --lock-path=/var/lock/nginx.lock --pid-path=/var/run/nginx.pid --with-http_realip_module --with-http_stub_status_module --with-http_ssl_module --with-debug --with-http_addition_module --with-http_dav_module --with-http_geoip_module --with-http_gzip_static_module --with-http_realip_module --with-http_stub_status_module --with-http_ssl_module --with-http_sub_module --with-http_xslt_module --with-ipv6 --with-sha1=/usr/include/openssl --with-md5=/usr/include/openssl --with-mail --with-mail_ssl_module --add-module=/etc/nginx/third-modules/nginx-accesskey-2.0.3 --add-module=/etc/nginx/third-modules/nginx-http-concat

编译：

make

替换nginx：

service nginx stop
    mv /usr/sbin/nginx /usr/sbin/nginx-20180403

检查配置文件：

/usr/sbin/nginx -t
    返回以下信息
    nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
    nginx: configuration file /etc/nginx/nginx.conf test is successful

升级ngnix：

make upgrade

错误问题：

参考之前升级过程，已经罗列了所有可能遇到的问题 [通过nginx代理拦截请求，进行全局访问限制][nginx]

3.配置nginx\_http\_concat

location ~ .*\.(jpg|js|html|mp3|gif|jpeg|png|bmp|swf|ico|css)$ #设定访问
    静态文件直接读取不经过tomcat
                    {
                            concat on;
                            concat_unique off;
                            concat_delimiter "\n";
                            concat_ignore_file_error off;
                            root  /var/lib/tomcat7/webapps/ROOT;
                            access_log off;
                            expires      30d;
                    }

4.最终测试

http://xxxxxxxx/index.jsp??js/personnel/insurance.js,performance.js,%20attendance.js,scheduling.js?0.35744541881709835

错误问题：

如果在访问时遇到400 请查看年nginx服务器中mime.types中js的类型 与nginx\_http\_concat是否一直,concat模块中的类型是application/x-javascript 如果不是的话，就去源码中修改一下

**解决过程：**

说一说解决的过程吧，我觉得这个比问题的本身要重要许多；当时想到这个问题，是加班比较晚了，在下班的途中，想到，既然每个请求都需要重复经过网路这段，每次都需要消耗网络资源，可不可以一次性加载多个资源，这样就节省了多个请求的网路耗时。当时的想法时，如果没有相关的，就自己写一个模块，因为之前写过apache的自定义模块，所以这个不难。在网上查找相关问题，发现了淘宝的这个开源模块；既然有开源的，就每必要再去重新造轮子了，如果以后业务需求提升，可能会需要自定义。同时感谢淘宝的开源

[nginx]: https://blog.csdn.net/qq_33571718/article/details/52511090