Laravel Inertia.js React SSR Vite Nginx Gzip配置优化方案分享，求指正

最近在做网页优化，核心是让项目正确适配Inertia SSR并启用Gzip压缩，涉及Vite和Nginx的配置调整，下面是具体配置内容，供大家参考：

Vite配置修改 #

在vite.config.js（或vite.config.ts）中添加SSR相关配置及Gzip压缩插件：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import { vitePlugin as inertia } from '@inertiajs/vite-plugin';
import compression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    laravel({
      input: 'resources/js/app.js',
      ssr: 'resources/js/ssr.js',
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
    inertia({
      ssr: {
        enabled: true,
        entry: 'resources/js/ssr.js',
      },
    }),
    // 启用Gzip压缩
    compression({
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 10240, // 文件大小超过10KB才压缩
      deleteOriginFile: false, // 保留原文件
    }),
  ],
  ssr: {
    noExternal: ['@inertiajs/vue3'],
  },
});

Nginx配置调整 #

在站点配置中添加Gzip压缩规则，并配置Inertia SSR的代理转发：

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/your/public;
    index index.php index.html;

    # Gzip压缩配置
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/xml+rss
        application/json;

    # Inertia SSR代理转发
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /ssr {
        proxy_pass http://127.0.0.1:13714; # SSR服务默认端口，可按需修改
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock; # 按实际PHP版本调整
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

补充说明 #

• 需提前安装vite-plugin-compression插件：npm install vite-plugin-compression --save-dev
• 启动SSR服务（以Laravel项目为例）：node public/ssr/ssr.js
• Nginx配置修改后需重启服务生效：sudo systemctl restart nginx

内容的提问来源于stack exchange，提问作者alireza alizade