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进程管理和重载原理详解
Apr 22 Servers
apache基于端口创建虚拟主机的示例
Apr 24 Servers
Nginx反向代理配置的全过程记录
Jun 22 Servers
Nginx图片服务器配置之后图片访问404的问题解决
Mar 21 Servers
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
Apr 07 Servers
Windows Server 2019 配置远程控制以及管理方法
Apr 28 Servers
Linux中文件的基本属性介绍
Jun 01 Servers
Nginx安装配置详解
Jun 25 Servers
Windows server 2003卸载和安装IIS的图文教程
Jul 15 Servers
Flink 侧流输出源码示例解析
Sep 23 Servers
CentOS7 minimal 最小化安装网络设置过程
Dec 24 Servers
Shell中的单中括号和双中括号的用法详解
Dec 24 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
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
php实现文件上传基本验证
2020/03/04 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
教师自查自纠工作情况报告
2014/10/29 职场文书
内勤岗位职责
2015/02/10 职场文书
廉洁自律证明
2015/06/24 职场文书