reactjs - 如何在使用 nextjs 框架制作并托管在 heroku 上的 express react 应用程序中最有效地执行 gzip

Question

我在 heroku 上托管了一个带有自定义 express 服务器的 nextjs 应用程序，地址为 https://nextherokuapp.herokuapp.com .我想优化它的速度。 Google 速度测试给出的建议之一是启用文本压缩。所以我使用了压缩中间件

这是我使用的压缩中间件的代码

const compression = require('压缩');const express = require('express');

...

const 服务器 = express();服务器.use(压缩());

但 google 速度测试建议进一步压缩文本会使页面加载增加 6 秒。

所以我的问题是我还能做些什么来压缩文本并提高页面加载速度。

Answer 1

应该可以在您的 NextJS 应用程序前面使用自定义 nginx buildpack 启用 gzip 压缩。

$ heroku buildpacks:add heroku-community/nginx

添加构建包并创建一个文件config/nginx.config.erb，配置如下:

http {
    gzip on;
    gzip_comp_level 2;
    gzip_min_length 512;

  server {
    listen <%= ENV["PORT"] %>;
    server_name _;
    keepalive_timeout 5;

    location / {

      <% if ENV['NGINX_SKIP_HTTPS_PROXY'] == 'true' %>
        if ($http_x_forwarded_proto != "https") {
          return 301 https://$host$request_uri;
        }
      <% end %>

      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_redirect off;
      proxy_pass http://localhost:3000; #next serve listens here and receives nginx requests
    }
  }
}

您可以在 this post 中找到完整的配置详细信息.