node express Server non serve file statici compressi con compressione brotli e gzip

Aug 21 2020

Ho l'app React con l'implementazione SSR utilizzando il pacchetto addon SSR caricabile NPM .

Sto seguendo questo tutorial A Tale of Brotli Compression per implementare la compressione brotli e gzip

Riesco a vedere i file compressi .br e .gzip nella cartella build. ma questi file non servono quando controllo su localhost, non sono sicuro se è perché sto controllando sul server di sviluppo localhost o qualcos'altro.

Seguito i passaggi seguenti:

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));

ha commentato il codice sopra in start.js.

Nel browser, vedo la stessa dimensione dei file JS e CSS statici di prima.

AGGIORNARE:

Dopo aver provato alcune cose, ho capito che devo apportare modifiche in start.js e non in server / index.js

Pertanto, per verificare se le cose funzionano come previsto, ho aggiunto un middleware per testare un caso d'uso specifico:

 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();
  });

Il codice sopra ha funzionato come previsto, ho ottenuto il file bundle.js compresso in un browser. ma lo stesso non funziona con express-static-gzip.

FYI: la mia cartella di build è su root e ha la struttura seguente:

build / client / statico /

Risposte

EdwardRomero Aug 31 2020 at 03:51

Credo che il problema sia correlato ai percorsi forniti da expressStaticGzip

Ecco un tutorial che fornisce informazioni più dettagliate sulla struttura delle directory e sulla configurazione. https://codeburst.io/express-brotli-webpack-a60773e7ec6c

 expressStaticGzip(path.join(__dirname)