Nginx静态压缩和代码压缩提高访问速度详解


Posted in Servers onMay 30, 2022

前言

基于目前大部分的应用,都使用了前后端分离的框架,vue的前端应用,也是十分的流行。

不知道大家伙,有无遇到这样的问题:

随着前端框架的页面,功能开发不断的迭代;安装的依赖,不断的增多;

这样导致的问题,就是我们的前端框架,会变得十分庞大,打包出来的dist目录会变得很大了喔!!!

这样就会导致一个问题:首次访问应用,会变得很慢!!!

这确实是一个严重的问题!!!T_T

对于这个问题,咋们今天就从代码压缩+nginx静态资源压缩,两个方面进行研究解决!!!

nginx静态资源动态压缩

  • nginx开启gzip压缩
server {
        listen       80;
        listen  [::]:80;
        server_name  localhost;
        server_tokens off;

        # 开启gzip压缩
        gzip on;
        gzip_disable "msie6";
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_types text/plain application/css text/css application/xml text/javascript application/javascript application/x-javascript;
        
        #llsydn 前端
        location /jxbp {           
             alias  /opt/llsydn/jxbp;
             index index.html;
             try_files $uri $uri/ /dist/index.html;
        }
 }

然后重启nginx:nginx -s reload

看看是否已经生效!!!

  • 压缩的效果图

Nginx静态压缩和代码压缩提高访问速度详解

  • 没有压缩的效果图:

Nginx静态压缩和代码压缩提高访问速度详解

从上面两张图可以看到:

第一张经过压缩:finish时间为2.36s,transferred为7.6MB

第二张没有压缩:finish时间为6.32s,transferred为24.6MB

很明显,经过了nginx的静态资源压缩,访问速度提高了,显著的!!!

看到这,咋们会有这样的一个问题,这压缩都是nginx干的活,那当访问量变大,那对于nginx的压力,是十分大的,毕竟都是动态压缩的!!!

那有无解决方法呢?

nginx静态资源动态压缩的原理,无非就帮我们将js、css等文件,压缩为一个.gz文件,然后传输给前端浏览器,进行解析。

说到这,咋们不禁会说:那咋们先将js、css等文件,生成对应的.gz文件,不就不需要nginx动态压缩了嘛?

好像是这么一回事!!!

天才呀!!!

nginx静态资源静态压缩

  • 将js、css等文件,生成对应的.gz文件

这个,就可以借助一些依赖进行处理了:compression-webpack-plugin

安装依赖:

npm install compression-webpack-plugin -D
  • vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
vueConfig.configureWebpack.plugins.push(new CompressionWebpackPlugin({
    test:/.js$|.html$|.\css/, // 匹配文件名
    threshold: 1024, // 对超过1k的数据压缩
    deleteOriginalAssets: false // 不删除源文件
}))

打包:

npm run build

Nginx静态压缩和代码压缩提高访问速度详解

可以看到,已经帮我们生成对应的.gz文件了!!!

  • nginx配置

在上面的基础上,再加上

gzip_static on

  • nginx得安装下面得模块:
ngx_http_gzip_module模块
ngx_http_gzip_static_module模块
ngx_http_gunzip_module模块
  • nginx开启gzip压缩
server {
        listen       80;
        listen  [::]:80;
        server_name  localhost;
        server_tokens off;

        # 开启gzip压缩
        gzip on;
        gzip_static on
        gzip_disable "msie6";
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_types text/plain application/css text/css application/xml text/javascript application/javascript application/x-javascript;
        
        #llsydn 前端
        location /jxbp {           
             alias  /opt/llsydn/jxbp;
             index index.html;
             try_files $uri $uri/ /dist/index.html;
        }
 }

然后重启nginx:nginx -s reload

看看是否已经生效!!!

  • 静态压缩

Nginx静态压缩和代码压缩提高访问速度详解

  • 动态压缩

Nginx静态压缩和代码压缩提高访问速度详解

好了,nginx的静态压缩,就到这里了!!!

总结

到此这篇关于Nginx静态压缩和代码压缩提高访问速度的文章就介绍到这了!


Tags in this post...

Servers 相关文章推荐
Nginx 502 Bad Gateway错误原因及解决方案
Mar 31 Servers
Nginx URL重写rewrite机制原理及使用实例
Apr 01 Servers
Nginx工作原理和优化总结。
Apr 02 Servers
Linux中Nginx的防盗链和优化的实现代码
Jun 20 Servers
Nginx配置文件详解以及优化建议指南
Sep 15 Servers
nginx中封禁ip和允许内网ip访问的实现示例
Mar 17 Servers
Nginx工作模式及代理配置的使用细节
Mar 21 Servers
配置nginx负载均衡
May 06 Servers
CentOS7安装MySQL8的超级详细教程(无坑!)
Jun 10 Servers
TaiShan 200服务器安装Ubuntu 18.04的图文教程
Jun 28 Servers
Windows Server 2012 R2服务器安装与配置的完整步骤
Jul 15 Servers
nginx访问报403错误的几种情况详解
Jul 23 Servers
Nginx 配置 HTTPS的详细过程
May 30 #Servers
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
May 25 #Servers
聊聊配置 Nginx 访问与错误日志的问题
May 25 #Servers
利用nginx搭建RTMP视频点播、直播、HLS服务器
详解Nginx的超时keeplive_timeout配置步骤
May 25 #Servers
nginx 配置指令之location使用详解
May 25 #Servers
zabbix配置nginx监控的实现
May 25 #Servers
You might like
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
Javascript Throttle & Debounce应用介绍
2013/03/19 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
python爬虫工具例举说明
2020/11/30 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
大学三年计划书范文
2014/04/30 职场文书
说明书范文
2014/05/07 职场文书
2014年文员工作总结
2014/11/18 职场文书
2015年工程部工作总结
2015/04/30 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书