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域名转发https访问的实现
Mar 31 Servers
Nginx内网单机反向代理的实现
Nov 07 Servers
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
May 25 Servers
linux目录管理方法介绍
Jun 01 Servers
windows server 2012安装FTP并配置被动模式指定开放端口
Jun 10 Servers
利用Apache Common将java对象池化的问题
Jun 16 Servers
Nginx开源可视化配置工具NginxConfig使用教程
Jun 21 Servers
Windows server 2022创建创建林、域树、子域的步骤
Jun 25 Servers
Linux下搭建SFTP服务器的命令详解
Jun 25 Servers
在windows server 2012 r2中安装mysql的详细步骤
Jul 23 Servers
win7配置本地ftp服务器的图文教程
Aug 05 Servers
CentOS7 minimal 最小化安装网络设置过程
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利用cookie实现访问次数统计代码
2011/05/19 PHP
PHP Class&Object -- 解析PHP实现二叉树
2013/06/25 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
微信小程序设置滚动条过程详解
2019/07/25 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
Python自动连接ssh的方法
2015/03/07 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python构建网页爬虫原理分析
2017/12/19 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
利用Python优雅的登录校园网
2020/10/21 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
党校培训自我鉴定范文
2014/04/10 职场文书
农村文化活动总结
2014/08/28 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
七年级英语教学反思
2016/02/15 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
PHP实现两种排课方式
2021/06/26 PHP
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python