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同一个域名配置多个项目的实现方法
Mar 31 Servers
nginx配置ssl实现https的方法示例
Mar 31 Servers
Mac环境Nginx配置和访问本地静态资源的实现
Mar 31 Servers
Nginx反向代理学习实例教程
Oct 24 Servers
详解nginx location指令
Jan 18 Servers
阿里云日志过滤器配置日志服务
Apr 09 Servers
Win10 Anaconda安装python-pcl
Apr 29 Servers
tomcat下部署jenkins的方法
May 06 Servers
nginx 配置缓存
May 11 Servers
Nginx配置使用详解
Jul 07 Servers
Nginx如何配置根据路径转发详解
Jul 23 Servers
centos环境下nginx高可用集群的搭建指南
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
使用php显示搜索引擎来的关键词
2014/02/13 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
Python实现简单的语音识别系统
2017/12/13 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Python3中详解fabfile的编写
2018/06/24 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
python路径的写法及目录的获取方式
2019/12/26 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
国贸专业的职业规划范文
2014/01/23 职场文书
房地产项目策划书
2014/02/05 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
员工离职感谢信
2015/01/22 职场文书
呼兰河传读书笔记
2015/06/30 职场文书