如何在Nuxt 3中对动态生成的HTML页面启用Brotli压缩？

你提到的compressPublicAssets确实仅针对public目录下的静态资源生效，要给动态生成的HTML页面启用Brotli压缩，可以通过以下两种方式实现：

方案1：使用Nitro内置压缩配置（推荐） #

Nuxt底层的Nitro框架提供了专门处理动态响应的压缩配置，直接在nuxt.config.ts的nitro字段中添加compress选项即可：

export default defineNuxtConfig({
  srcDir: "src/",
  devtools: { enabled: true },
  ssr: true,
  // 你的其他配置...
  nitro: {
    compressPublicAssets: {
      gzip: true,
      brotli: true
    },
    // 新增：启用动态响应压缩
    compress: true,
    // 可选：自定义压缩规则（比如指定编码、最小压缩阈值）
    // compress: {
    //   encoding: ['br', 'gzip'], // 优先Brotli
    //   threshold: 1024 // 仅压缩大于1KB的响应
    // }
  }
})

这个配置会自动识别客户端的Accept-Encoding请求头，优先使用Brotli压缩动态HTML（以及其他动态响应内容），无需额外编写代码。

方案2：自定义Nitro中间件 #

如果内置配置无法满足你的个性化需求，可以通过自定义中间件实现精准控制：

1. 在项目的server/middleware目录下创建compress-html.ts文件：

import type { NitroApp } from 'nitropack'
import { compress } from 'nitropack/utils'

export default defineNitroPlugin((nitroApp: NitroApp) => {
  nitroApp.hooks.hook('render:response', async (response) => {
    // 仅处理HTML类型的响应
    if (!response.headers['content-type']?.includes('text/html')) return

    const acceptEncoding = response.headers['accept-encoding'] || ''
    let compressedContent

    // 优先使用Brotli压缩
    if (acceptEncoding.includes('br')) {
      compressedContent = await compress(response.body, 'br')
      response.headers['content-encoding'] = 'br'
    } else if (acceptEncoding.includes('gzip')) {
      compressedContent = await compress(response.body, 'gzip')
      response.headers['content-encoding'] = 'gzip'
    }

    if (compressedContent) {
      response.body = compressedContent
      response.headers['content-length'] = String(compressedContent.length)
      // 移除ETag，避免压缩后内容不一致导致缓存问题
      delete response.headers['etag']
    }
  })
})

该中间件会在响应渲染阶段，针对HTML内容进行压缩，根据客户端支持的编码格式选择最优压缩方式。

验证方式 #

构建项目后启动生产服务，通过浏览器开发者工具的「网络」面板查看HTML请求的响应头，若存在content-encoding: br则说明Brotli压缩已生效。

注意：如果你的部署环境使用了反向代理（如Nginx、Cloudflare），需确保代理未重复配置压缩，避免资源被多次压缩影响性能。

内容的提问来源于stack exchange，提问作者kevin castañeda