Node Express 服务器不提供使用 brotli 和 gzip 压缩的压缩静态文件

Question

我有使用React 可加载 SSR 插件 npm package实现 SSR 实现的 React 应用程序。

我正在按照本教程A Tale of Brotli Compression来实现 brotli 和 gzip 压缩

我可以在构建文件夹中看到 .br 和 .gzip 压缩文件。但是当我检查本地主机时这些文件不起作用，我不确定是否是因为我正在检查本地主机开发服务器或其他东西。

遵循以下步骤：

webpackConfig/plugins.js

const CompressionPlugin = require('compression-webpack-plugin');
const BrotliPlugin = require('brotli-webpack-plugin');

  new CompressionPlugin({
    filename: '[path].gz[query]',
  }),
  new BrotliPlugin({
    asset: '[path].br[query]',
    test: /\.(js|css|html|svg)$/,
    threshold: 10240,
    minRatio: 0.8,
  }),

服务器/index.js

import expressStaticGzip from 'express-static-gzip';
import path from 'path';

const server = express();
server.use(cors());
server.use(bodyParser.json());
server.use(bodyParser.urlencoded({ extended: false }));
server.use(cookieParser());
server.use(
  '/static*',
  // '/build/client',
  expressStaticGzip(path.join(paths.clientBuild, paths.publicPath), {
    enableBrotli: true,
    orderPreference: ['br', 'gz'],
    setHeaders(res) {
      res.setHeader('Content-Encoding', 'br');
      res.setHeader('Cache-Control', 'public, max-age=31536000');
    },
  })
);

server.use(
  '/static*',
  expressStaticGzip(path.join(paths.serverBuild, paths.publicPath), {
    enableBrotli: true,
    orderPreference: ['br', 'gz'],
    setHeaders(res) {
      res.setHeader('Content-Encoding', 'br');
      res.setHeader('Cache-Control', 'public, max-age=31536000');
    },
  })
);
server.use(compression());

启动.js

// app.use('/static',express.static(paths.clientBuild));

在 start.js 中注释了上面的代码。

在浏览器中，我看到静态 JS 和 CSS 文件的大小与以前相同。

更新：

尝试了一些事情后，我明白我需要在 start.js 而不是 server/index.js 中进行更改

因此，为了测试事情是否按预期工作，我添加了一个中间件来测试特定用例：

 app.get('/static*', function (req, res, next) {
    console.log('req buncle url', req.url)
     req.url = req.url + '.gz';
    res.set('Content-Encoding', 'gzip');
    res.set('Content-Type', 'text/javascript');
    next();
  });

上面的代码按预期工作，我在浏览器中获得了压缩的bundle.js文件。但同样不适用于express-static-gzip。

仅供参考：我的构建文件夹位于根目录下，具有以下结构：

构建/客户端/静态/

Answer 1

我相信问题与您提供的expressStaticGzip 路径有关

这是一个教程，为您提供有关目录结构和设置的更多详细信息。https://codeburst.io/express-brotli-webpack-a60773e7ec6c

 expressStaticGzip(path.join(__dirname)