ICE.ICE|

韩憨

园龄:4年6个月粉丝:42关注:47

Nginx静态压缩和代码压缩,提高访问速度!

https://mp.weixin.qq.com/s/0yfUWWfM2RcQBgCiAKcZLA

  • nginx静态资源动态压缩
  • nginx静态资源静态压缩

基于目前大部分的应用,都使用了前后端分离的框架,vue的前端应用,也是十分的流行。不知道大家有无遇到这样的问题:

随着前端框架的页面,功能开发不断的迭代;安装的依赖,不断的增多;

这样导致的问题,就是我们的前端框架,会变得十分庞大,打包出来的dist目录会变得很大了喔!!!

这样就会导致一个问题:首次访问应用,会变得很慢!!!

这确实是一个严重的问题!!!T_T

对于这个问题,咋们今天就从代码压缩+nginx静态资源压缩,两个方面进行研究解决!!!

nginx静态资源动态压缩

  • nginx开启gzip压缩
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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

看看是否已经生效!!!

  • 压缩的效果图

  • 没有压缩的效果图

从上面两张图可以看到:

  • 第一张经过压缩: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

安装依赖:

1
npm install compression-webpack-plugin -D
  • vue.config.js
1
2
3
4
5
6
7
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 // 不删除源文件
}))

打包:

1
npm run build

可以看到,已经帮我们生成对应的.gz文件了!!!

  • nginx配置

在上面的基础上,再加上

1
gzip_static on
  • nginx得安装下面得模块:
1
2
3
ngx_http_gzip_module模块
ngx_http_gzip_static_module模块
ngx_http_gunzip_module模块
  • nginx开启gzip压缩
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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的静态压缩,就到这里了!!!

本文作者:韩憨

本文链接:https://www.cnblogs.com/hanby/p/18107762

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   韩憨  阅读(138)  评论(0编辑  收藏  举报
//看板娘
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 隔离 (Studio Live Duet) 陈凯咏,林家谦
  2. 2 明知做戏 吴雨霏
  3. 3 残酷游戏 卫兰
  4. 4 你,好不好? 周兴哲
  5. 5 我可以 蔡旻佑
  6. 6 云烟成雨 房东的猫
  7. 7 说散就散 JC 陈咏桐
  8. 8 我配不上你 夏天Alex
  9. 9 不再联系 夏天Alex
  10. 10 等我先说 夏天Alex
  11. 11 我知道他爱你 夏天Alex
  12. 12 多想在平庸的生活拥抱你 隔壁老樊
  13. 13 这一生关于你的风景 隔壁老樊
  14. 14 我曾 隔壁老樊
  15. 15 关于孤独我想说的话 隔壁老樊
  16. 16 过客 周思涵
  17. 17 备爱 周思涵
  18. 18 嚣张 en
  19. 19 海口 后弦
残酷游戏 - 卫兰
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作词 : 林夕

作曲 : 蔡伯南

编曲 : 雷颂德

谁能用毅力便换来感情

谁凭施舍可保得住惨胜

你有多大量 亦未敢领我的情

但就算是恶梦 拒绝苏醒

如何用玩命换来温柔

如何用玩命换来温柔

如何比她好 一样不够

谈情像奋斗 共谁在斗

没人道别亦知一早要走

其实自命受苦都只因我能离不离

其实自命受苦都只因我能离不离

看着对你爱得彷似爱情欲避不避

若能耗尽力气 去捕捉你

亦能剩下自己可挽救自己

我也知越是幻想不准想你更记得起

我也知越是幻想不准想你更记得起

我在故意去将苦涩替代寂寞滋味

用残酷游戏制造卑微

自由自在莫非惨过永远受气

对你怎么好 亦无所图

对你怎么好 亦无所图

同情分多少 都也得到

明明避过你 未凭命数

明明极易活得比死更好

我也知越是幻想不准想你更记得起

我也知越是幻想不准想你更记得起

我在故意去将苦涩替代寂寞滋味

用残酷游戏制造卑微

自由自在莫非惨过永远自欺

我也知道远处有人爱惜我

我也知道远处有人爱惜我

也知做人无求最好不过

我肯知错也是错 我想知道也做到

埋头事业便令大家好过

其实自命受苦都只因我能离不离

其实自命受苦都只因我能离不离

看着对你爱得彷似爱情欲避不避

若能耗尽力气 去捕捉你

亦明如何才可释放我伤悲

我也知越是幻想不准想你更记得起

我也知越是幻想不准想你更记得起

我在故意去将苦涩替代寂寞滋味

用残酷游戏 制造卑微

自由自在莫非惨过永远受气

若然被嫌弃 也是天理

自怜自虐自讨苦吃贵客自理