如何发送压缩在 nuxt.js 中的 api 响应

Question

Chrome Lighthouse 告诉我，通过压缩我的 api 路由

，我可以节省大约 90% 的传输字节

如何修改此代码 (api/something.js) 以启用压缩？

export default {
    path: '/api/something',
    async handler(req, res) {
        let data = await obtainDataSomehow();
        res.end(JSON.stringify(data));
    }
}

静态文件和呈现的路由已经压缩，我只有 api 个路由有问题。

Answer 1

选项 1：Express 和压缩中间件

如果您使 server middleware extend Express, then you can use the compression middleware 处理 HTTP 响应的压缩：

例如：


    import express from 'express';
    import compression from 'compression';
    
    const app = express();
    // NB: compression threshold set to 0 for demonstration purposes only;
    //     this should be set to a higher value, such as the default 1 kb
    //     in live applications
    app.use(compression({ threshold: 0 }));
    
    app.get('*', (req, res) => {
      const data = { success: true };
      res.setHeader('Content-Type', 'application/json');
      res.end(JSON.stringify(data));
    });
    
    export default {
      path: '/api/something',
      handler: app
    }

这可以从 command-line 中测试，例如：


    curl -H "Accept-Encoding: gzip" -i http://localhost:3000/api/something

这将显示响应 header Content-Encoding: gzip

选项 2：委托给 gateway/reverse 代理

如果您的实时部署运行在网关或反向代理（如 NGINX、Apache、Cloudflare 等）后面，您可以让它处理压缩，而不需要让您的服务器中间件这样做.

在这种情况下，您还可以禁用 Nuxt 对其他资源的压缩 renderer in nuxt.config.js:


    export default {
      render: {
        compressor: false
      }
    };

如何发送压缩在 nuxt.js 中的 api 响应

How to send api response compressed in nuxt.js

nuxt.js

选项 1：Express 和压缩中间件

选项 2：委托给 gateway/reverse 代理