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搭建rtmp直播服务器实现代码
Mar 31 Servers
nginx反向代理时如何保持长连接
Mar 31 Servers
图文详解Nginx版本平滑升级方案
Sep 15 Servers
Apache Pulsar集群搭建部署详细过程
Feb 12 Servers
Nginx设置HTTPS的方法步骤 443证书配置方法
Mar 21 Servers
CKAD认证中部署k8s并配置Calico插件
Mar 31 Servers
iSCSI服务器CHAP双向认证配置
Apr 01 Servers
IIS服务器中设置HTTP重定向访问HTTPS
Apr 29 Servers
Nginx 常用配置
May 15 Servers
Linux中文件的基本属性介绍
Jun 01 Servers
linux目录管理方法介绍
Jun 01 Servers
Linux安装Docker详细教程
Jul 07 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
asp.net和php的区别点总结
2019/10/10 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
python爬虫实例详解
2018/06/19 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
个人思想理论学习的自我鉴定
2013/11/30 职场文书
建筑文秘专业个人求职信范文
2013/12/28 职场文书
财务内勤岗位职责
2014/04/17 职场文书
工作岗位说明书模板
2014/05/09 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
学校开除通知书
2015/04/25 职场文书