vue开启Gzip性能优化

ZhuAiQuan

已于 2023-05-06 10:33:39 修改

阅读量538

点赞数 1

分类专栏： Vue 文章标签： nginx node.js

于 2021-05-21 14:39:05 首次发布

本文链接：https://blog.csdn.net/ZhuAiQuan/article/details/117119383

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

使用gzip能有效减少打包后的项目体积，但是需要配置nginx和vue.config.js文件；

webpack配置gzip

需要先安装compression-webpack-plugin

npm i compression-webpack-plugin

如果配置了gzip 但是打包或者运行时显示Cannot read property ‘tapPromise’ of undefined 之类的报错，需要先删除当前的compression-webpack-plugin模块再安装低版本的compression-webpack-plugin；

npm uninstall compression-webpack-plugin
npm i compression-webpack-plugin@5.0.1

配置vue.config.js

require导入compression-webpack-plugin；
指定压缩类型

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];

配置configureWebpack

configureWebpack: {
      plugins: [
          new CompressionWebpackPlugin({
              filename: '[path].gz[query]',
              algorithm: 'gzip',
              test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
              threshold: 10240,
              minRatio: .2
          })
      ]
  }
};

在这里插入图片描述

执行打包命令打包后检查dist文件里是否有.gz之类的压缩包，有则配置成功；

接下来配置nginx

没有先去这下载nginx

配置nginx/conf/nginx.conf
找到http 在其复制一下代码粘贴

	gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    #gzip_http_version 1.0;
    gzip_comp_level 2;
    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;
    gzip_vary off;
    gzip_disable "MSIE [1-6].";

在这里插入图片描述
此时已完成nginx的配置

将打包后的项目复制到nginx目录下的html的文件夹下面
在这里插入图片描述

运行nginx看看是否能正常访问
cmd打开Nginx的根目录命令运行或者直接双击Nginx.ext
打开Localhost看看是否能运行

附录一些Nginx的命令

start nginx 启动nginx服务
nginx -s quit 关闭nginx
nginx -s reload 重启nginx
nginx -h 你需要我的帮助

~~end~~

VITE 配置gzip

现在已经快进到vite打包构建项目了，vite也是能用gzip来压缩代码的。
上才艺
先安装gzip依赖

npm i vite-plugin-compression -D

在vite.config.ts里引入模块，

import Compression from 'vite-plugin-compression'

在plugins里配置模块
在这里插入图片描述
配置参数可查看官网文档 vite-plugin-compression模块中文文档

剩下的就是自行打包测试了

再更新…

如何查看是否已经开启了gzip

关于如何查看是否已经开启了gzip
首先F12控制台打开-选择网络-右键-勾选content-encoding。
在这里插入图片描述
F5刷新页面如果content-encoding这一项显示了gzip 就说明已开启gzip