vue3+vite+nginx gzip格式压缩代码

@YDX

已于 2022-07-20 14:47:00 修改

阅读量1.6k

点赞数 1

分类专栏： vue vue3

于 2022-07-14 17:20:51 首次发布

本文链接：https://blog.csdn.net/weixin_43485503/article/details/125787960

版权

nginx vue

vue3 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

1. vite配置

首先下载插件

npm install vite-plugin-compression -D

在vite.config.js中引入

import viteCompression from 'vite-plugin-compression'

/** 此处引用 */
  plugins: [
            viteCompression(),
        ],

执行npm run build在控制台查看效果，生成了.gz后缀的包

2. nginx配置

官方配置文档说明

配置之后，nginx会加载.gz后缀的文件

 server {
        listen       8080;
        server_name  localhost;
        #gzip
        #开启gzip功能
        gzip on; 
        #开启gzip静态压缩功能
        gzip_static on; 
        #gzip缓存大小
        gzip_buffers 4 16k;
        #gzip http版本
        gzip_http_version 1.1;
        #gzip 压缩级别 1-10 
        gzip_comp_level 5;
        #gzip 压缩类型
        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        # 是否在http header中添加Vary: Accept-Encoding，建议开启
        gzip_vary on;
    }