node express Serverは、brotliおよびgzip圧縮で圧縮された静的ファイルを提供しません

Aug 21 2020

私はreactロード可能なSSRアドオンnpmパッケージを使用してSSR実装でreactアプリを持っています。

私はこのチュートリアルに従っていますABrotliとgzip圧縮を実装するためのBrotli圧縮の物語

ビルドフォルダに.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,
  }),

server / 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());

start.js

// app.use（ '/ static'、express.static（paths.clientBuild））;

start.jsの上記のコードにコメントしました。

ブラウザに、以前と同じサイズの静的JSファイルとCSSファイルが表示されます。

更新：

いくつか試してみたところ、server /index.jsではなくstart.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では同じことが機能しません。

参考：私のビルドフォルダはルート上にあり、以下の構造になっています。

ビルド/クライアント/静的/

回答

EdwardRomero Aug 31 2020 at 03:51

問題は、expressStaticGzipを提供しているパスに関連していると思います

これは、ディレクトリ構造とその設定に関する詳細情報を提供するチュートリアルです。 https://codeburst.io/express-brotli-webpack-a60773e7ec6c