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实现上游服务器动态自动上下线无需reload的实现方法
Mar 31 Servers
Nginx服务器如何设置url链接
Mar 31 Servers
利用Nginx代理如何解决前端跨域问题详析
Apr 02 Servers
nginx服务器的下载安装与使用详解
Aug 02 Servers
基于Apache Hudi在Google云构建数据湖平台的思路详解
Apr 07 Servers
Linux、ubuntu系统下查看显卡型号、显卡信息详解
Apr 07 Servers
阿里云 Windows server 2019 配置FTP
Apr 28 Servers
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
Apr 29 Servers
Nginx安装配置详解
Jun 25 Servers
nginx之queue的具体使用
Jun 28 Servers
nginx配置指令之server_name的具体使用
Aug 14 Servers
Fluentd搭建日志收集服务
Sep 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
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php强制运行广告的方法
2014/12/01 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
javascript FormatNumber函数实现方法
2008/12/30 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
Python 字符串操作方法大全
2014/03/11 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
期末自我鉴定
2014/02/02 职场文书
校园文化建设方案
2014/02/03 职场文书
公司活动方案范文
2014/03/06 职场文书
初三班主任寄语大全
2014/04/04 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
师德师风事迹材料
2014/12/20 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
二十年同学聚会感言
2015/07/30 职场文书
物业公司管理制度
2015/08/05 职场文书
ant design charts 获取后端接口数据展示
2022/05/25 Javascript