node express Server는 brotli 및 gzip 압축으로 압축 된 정적 파일을 제공하지 않습니다.

Aug 21 2020

react loadable SSR addon npm package를 사용하여 SSR 구현으로 반응 앱이 있습니다.

이 튜토리얼 A Tale of Brotli Compression 을 따라 brotli 및 gzip 압축을 구현합니다.

빌드 폴더에서 .br 및 .gzip 압축 파일을 볼 수 있습니다. 그러나이 파일은 localhost에서 확인할 때 제공되지 않습니다. localhost 개발 서버 또는 다른 것을 확인하고 있기 때문인지 확실하지 않습니다.

아래 단계를 따르십시오.

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