已安装的nginx，动态模块开启google brotli 压缩，并在vite项目中启用

1.下载ngx_brotli

到github https://github.com/google/ngx_brotli

然后git clone

cd /usr/local/
git clone https://github.com/google/ngx_brotli.git
cd /usr/local/ngx_brotli
git submodule update --init

2.下载nginx版本，如果已经安装过nginx，则下载对应版本

到这个nginx官网下载 https://nginx.org/en/download.html

比如我的nginx-1.25.4

wget https://nginx.org/download/nginx-1.25.4.tar.gz
tar xzvf nginx-1.25.4.tar.gz

解压后看下nginx的编译时的命令参数，nginx -V 记得是大写V

nginx -V
#以下内容不是命令
#输出一下内容 
--prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-http_v3_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-g -O2 -ffile-prefix-map=/data/builder/debuild/nginx-1.25.4/debian/debuild-base/nginx-1.25.4=. -flto=auto -ffat-lto-objects -flto=auto -ffat-lto-objects -fstack-protector-strong -Wformat -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -fPIC' --with-ld-opt='-Wl,-Bsymbolic-functions -flto=auto -ffat-lto-objects -flto=auto -Wl,-z,relro -Wl,-z,now -Wl,--as-needed -pie'

3.执行编译，进入到nginx源码目录，就是执行nginx -V输出的参数加上 --with-compat --add-dynamic-module=/usr/local/ngx_brotli ，还需要安装一些编译的库

cd nginx-1.25.4/
apt install -y libpcre3 libpcre3-dev openssl libssl-dev libbrotli-dev
./configure --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-http_v3_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-g -O2 -ffile-prefix-map=/data/builder/debuild/nginx-1.25.4/debian/debuild-base/nginx-1.25.4=. -flto=auto -ffat-lto-objects -flto=auto -ffat-lto-objects -fstack-protector-strong -Wformat -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -fPIC' --with-ld-opt='-Wl,-Bsymbolic-functions -flto=auto -ffat-lto-objects -flto=auto -Wl,-z,relro -Wl,-z,now -Wl,--as-needed -pie' --with-compat --add-dynamic-module=/usr/local/ngx_brotli

make modules

4.把brotli加载到Nginx里,在nginx源码目录里执行

mv ./objs/ngx_http_brotli_filter_module.so /usr/lib/nginx/modules/
mv ./objs/ngx_http_brotli_static_module.so /usr/lib/nginx/modules/

再到/etc/nginx/nginx.conf里的顶部添加加载的命令

vim /etc/nginx/nginx.conf

#在这个文件顶部添加
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

#然后在http块里添加开启brotli 命令 比如nginx.conf
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
	#开启Brotli压缩
	brotli on;
	#压缩等级，0 到 11，默认值是 6，过大会额外消耗服务器CPU
	brotli_comp_level 6;
	#设置需要进行压缩的最小响应大小，单位为字节
	brotli_min_length   512;
	#指定哪些MIME类型进行压缩
	brotli_types text/plain text/javascript text/css text/xml text/x-component 	application/javascript application/x-javascript application/xml application/json application/xhtml+xml application/rss+xml application/atom+xml application/x-font-ttf application/vnd.ms-fontobject image/svg+xml image/x-icon font/opentype image/vnd.microsoft.icon image/jpeg image/png image/gif;

	#是否允许查找预处理好的、以 .br 结尾的压缩文件。可选值为 on、off、always
	brotli_static       always;
    server_tokens off;
    include /etc/nginx/conf.d/*.conf;
}

5.在vite项目中打包开启生成.br文件

#安装插件
pnpm i rollup-plugin-gzip -D

在vite.config.js中启用

import { fileURLToPath, URL } from 'node:url'
import { brotliCompress } from 'zlib'
import { promisify } from 'util'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import gzipPlugin from 'rollup-plugin-gzip'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { Buffer } from 'buffer'
const brotliPromise = promisify(brotliCompress)
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
    gzipPlugin(),  #这是开启gzip
    gzipPlugin({   #这是开启brotli 两者可以同时开启
      customCompression: (content) => brotliPromise(Buffer.from(content)),
      fileName: '.br'
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://192.168.3.32:9000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api')
      },
    }
  }
})