nginx开启Gzip压缩,Vue性能优化之使用gzip压缩打包

这篇具有很好参考价值的文章主要介绍了nginx开启Gzip压缩,Vue性能优化之使用gzip压缩打包。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、前言

不管是vue项目还是react项目在使用webpack打包之后都会生成一个动辄一两兆甚至更大的js文件,在某些情况下严重影响项目性能,打开页面的时候白屏时间会很长,本文将介绍如何使用gzip压缩打包,主要是nginx部署的配置,非常重要,我查阅了很多文章基本都没用说清楚甚至错误的。

gzip压缩分两种,一种是服务器压缩后传输给浏览器,但是这种方案是请求时服务器实时压缩,比较消耗服务器性能;另外一种就是前端在webpack打包的时候压缩好,服务器做一些相应配置就可以返回压缩包给浏览器,只是打包出来的dist体积会偏大,但是不消耗服务器性能。

这两种综合起来使用是比较划算的,接下来说说前端打包步骤。

二、nginx配置

这个配置花了我很多时间,网上写的基本都不全甚至是错误的,按照我下面的步骤保证可以实现效果。

1. 检查nginx模块

首先要检查一下nginx的模块,找到nginx的q启动文件,我的是/usr/sbin/nginx,如果你找不到可以使用 ps -ef | grep nginx 命令找到master进程所在的目录,进入sbin目录然后执行 ./nginx –V ,注意是大写的V,查看结果如下:

nginx开启Gzip压缩,Vue性能优化之使用gzip压缩打包

第一行是nginx的版本,我的是1.16.1,重点是最后一行,我的nginx安装了很多模块,其中我们需要的就是红框部分 --with-http_gzip_static_module,有的话那就不需要下面的步骤了,可以直接跳到第2步,如果没有那就继续往下看。

2、加入模块重新编译

如果我们在上面步骤里发现nginx没有gzip_static模块的话,那就需要我们重新编译安装一下nginx。

首先需要找到nginx的源码路径,如果不知道可以执行find / -name nginx查找,我的在/usr/local/nginx-1.16.1,然后cd到这个目录,可以先使用ll命令看一下有没有configure文件,如果有说明源码目录找对了,如果没有则再查找一下,实在找不到那就说明源码已经被删了,那就只能卸载当前nginx整个重装了。

如果第一步看到的nginx已有一些模块,则需要把这些已有的模块复制下来,然后再后面加上--with-http_gzip_static_module,执行如下命令:

./configure --prefix=/usr/share/nginx --modules-path=...[整个复制]... --with-http_gzip_static_module

如果第一步看到的一个模块都没有的话,那就直接重新编译,注意 --prefix=后面写ng所在路径:

./configure --prefix=/usr/share/nginx --with-http_gzip_static_module

3、安装

执行命令make,进行安装

make

4、备份

为了确保安全,将旧的nginx做一个备份(目录如果不一样记得更换)

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

5、覆盖原来的nginx

先把nginx服务停止掉

ps -ef | grep nginx

找到master进程并且将其kill掉。复制安装好的新的nginx文件覆盖旧的:

cp ./objs/nginx /usr/local/nginx/sbin/

6、验证

查看模块

/usr/local/nginx/sbin/nginx -V

如果出现 gzip_module说明安装成功。

7、添加gzip配置

一般是在http里面加,也可以在某个server里加

http {
	gzip on;
	gzip_static on;
	gzip_min_length  5k;
	gzip_buffers     4 16k;
	gzip_http_version 1.0;
	gzip_comp_level 7;
	gzip_types       text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
	gzip_vary on;
}

其中:gzip_static on; 是为了命中dist里的gz文件,其他的配置是服务器实时压缩配置,一般两种都写上,有静态gz文件的会优先返回gz文件,没有的话就会开启实时压缩,实时压缩是比较耗服务器资源的。

三、附录

配置项释义:

# 开启服务器实时gzip
  gzip on;

  # 开启静态gz文件返回
  gzip_static on;

  # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
  gzip_min_length 1k;

  # 设置压缩所需要的缓冲区大小
  gzip_buffers 32 4k;

# 设置gzip压缩针对的HTTP协议版本
  gzip_http_version 1.0;

  # gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
  gzip_comp_level 7;

  # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

  # 是否在http header中添加Vary: Accept-Encoding,建议开启
  gzip_vary on;

  # 禁用IE 6 gzip
  gzip_disable "MSIE [1-6]\.";

四、webpack配置

这一步是很简单的,安装一个包,然后加上配置即可

npm install --save-dev compression-webpack-plugin@1.1.2

我这里下载的是1.1.2版本的,试过更高的版本会有ES6语法的报错,因为我node使用的是v12,如果node版本更高可以尝试更高版本。

然后在vue.config.js里加上配置如下:

module.exports = {
  chainWebpack: config => {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    if (process.env.NODE_ENV === 'production') {
        config.plugin('CompressionPlugin').use(
        	new CompressionWebpackPlugin({
            test: /\.(js|css)$/,
            threshold: 10240, // 超过10kb的文件就压缩
      			deleteOriginalAssets:true, // 不删除源文件
      			minRatio: 0.8
          })
        )
   	}
  }
}

然后当我们运行npm run build之后你就会发现dist里除了以前的文件以外会有很多同名的gz文件,而且体积小了很多,这就是压缩后的了。

nginx开启Gzip压缩,Vue性能优化之使用gzip压缩打包文章来源地址https://www.toymoban.com/news/detail-434384.html

到了这里,关于nginx开启Gzip压缩,Vue性能优化之使用gzip压缩打包的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Nginx中配置GZIP压缩详解

    网站访问速度对用户来说是很重要的体验,有时候除了增大带宽外,还需要对文件进行压缩。 首先找到Nginx安装路径下的配置文件: 保存后,使用nginx -t检查配置文件是否OK:         上述报错证明nginx在编译安装时候没有连同http_ssl_module模块一同编译;现在的情况是nginx已经

    2024年02月04日
    浏览(32)
  • 三、nginx两种压缩配置[gzip]

    解释:通过配置参数,让nginx压缩指定后缀格式文件,然后发送给用户,但是这样这些压缩文件无法使用sendfile的高效传送( 使用其能使得文件传输不经过程序,加载到缓存直接发送,相反off的话,需要在硬盘-缓存-程序-发送 ),因为文件需要先经过nginx压缩 gzip on/off; :开启

    2024年02月16日
    浏览(38)
  • Linux中_使用tar_gzip_zip_rar_命令_打包和解包_压缩和解压

    1.3.1、到当前目录下 1.3.2、到指定目录下 3.1.1、压缩当前目录: 3.1.2、压缩指定目录: 3.2.1、到当前目录 3.2.2、到指定目录 4.2.1、压缩文件本身: 4.2.2、递归压缩,将指定目录下所有文件和子目录一并压缩:

    2024年02月04日
    浏览(58)
  • 文件压缩与解压性能对比 lzop, gzip

    关于 lzo LZO是一个超级强大的压缩库,最大的特点就是压缩/解压速度极快。LZO 除了极快的压缩和解压速度以外,最重要的特性就是就地解压,即不使用临时文件,这对于体积较大的文件来说,例如光盘映像,是非常合适的。另外,解压无需内存,解压速度与压缩率无关,这两

    2024年02月03日
    浏览(39)
  • Linux 打包压缩解压指令 gzip bzip2 tar

    总结自 鸟哥Linux私房菜 Linux压缩文件的扩展名大多是:“.tar, .tar.gz, .tgz, .gz, .Z, .bz2, *.xz”, 不同压缩文件使用了不同的算法,不能通用压缩或解压 常见扩展名: Linux上常见的压缩指令就是 gzip, bzip2 以及最新的 xz ,至于 compress 已经退流行了。为了支持 windows 常见的 zip,其实

    2024年02月05日
    浏览(39)
  • 性能优化-webpack配置gzip

    3步搞定,实测1.3Mjs压缩到363k,体积减少70% 1.装包 yarn add compression-webpack-plugin --dev 2.配置webpack 打开config/webpack.config.js 1)在 module.exports 导出函数前面引入插件 2)添加配置 位置,搜索new HtmlWebpackPlugin(在其上边添加配置

    2024年02月15日
    浏览(39)
  • Linux下的打包(tar)、压缩(gzip / bzip2)、解压gz / bz2 / xz

    Linux中打包和压缩是两个过程,分别有对应的指令来执行这两步操作。 打包 指的是将一堆文件装到一个大袋子里, 压缩 则是把这个袋子里的空气给抽干。 目录 1、打包命令 tar 2、打包压缩一步到位的方式 (1) 方式一:tar 与 gzip 相结合 (2) 方式二:tar 与 bzip2 相结合 3、总结

    2024年02月13日
    浏览(59)
  • OpenFeign / SpringBoot 响应使用gzip压缩(含例子)

    全局压缩(接口与浏览器响应压缩) min-response-size 与 mime-types 均包含默认值,可以不手动指定,如有其他需要可按需指定 局部压缩(微服务之间利用feign请求及响应压缩) 2.1准备product (测试全局压缩) 启动类添加注解 @EnableFeignClients 指定目录 接口类添加注解 @FeignClient 实

    2023年04月14日
    浏览(37)
  • 使用Java IO进行压缩和解压缩 | ZIP和GZIP的实现

      Java IO中的压缩和解压缩功能主要通过 java.util.zip 包和 java.util.jar 包来实现,并具有以下作用和优势: 方便易用 :Java提供了简洁而易于使用的API,使得压缩和解压缩变得简单和方便。 多种压缩算法支持 :Java提供了多种压缩算法,如ZIP、GZIP、JAR等,可以根据不同的需求

    2024年02月15日
    浏览(46)
  • Linux系统常见的压缩命令和打包命令(gzip,zcat,bzip2,bzcat,xz,xzcat,zip,unzip,tar)

    在Linux的环境中,压缩文件的扩展名大多是: tar、tar.gz、*tgz、*gz、 *.Z 、 *.bz2、 *.xz。 这是因为Linux支持的压缩命令非常多,且不同的命令所用的压缩技术并不相同,彼此之间可能就无法互通压缩/解压缩文件。所以,当你要下载某个压缩文件时,自然就需要知道该文件是由哪

    2024年02月05日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包