Блог

Главная - Вопросы по программированию - сервер node Express не обслуживает сжатые статические файлы со сжатием brotli и gzip

сервер node Express не обслуживает сжатые статические файлы со сжатием brotli и gzip

#reactjs #express #compression #gzip #brotli

#reactjs #экспресс #сжатие #gzip #brotli

Вопрос:

У меня есть приложение react с реализацией SSR, использующее пакет npm для добавления SSR, загружаемый react.

Я следую этому руководству Рассказ о сжатии Brotli, чтобы реализовать сжатие 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(пути.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.

К вашему СВЕДЕНИЮ: Моя папка сборки находится в корневом каталоге и имеет структуру, приведенную ниже:

сборка / клиент / статический/

Комментарии:

1. Вы тестируете в каком браузере?

2. Я использую Google Chrome. и он принимает кодировку gzip и brotli. Я проверил с помощью определенного маршрута статический файл, и он работает правильно app.get(‘/static *’, function (req, res, next) { console.log (‘url-адрес запроса’, req.url) req.url = req.url ‘.gz’; res.set(‘Content-Encoding’, ‘gzip’); res.set(‘Content-Type’, ‘text/javascript’); next(); });

3. @MohamedRamrami спасибо, я внес обновление, если это поможет.

4. У меня была включена настройка CI / CD для Azure web app Linux/node , и я столкнулся с этой проблемой в новом производственном веб-приложении, которое было идентично веб-приложению dev. В веб-приложении разработчика все работало нормально, и .gz файлы обслуживались. Остановка / запуск рабочего веб-приложения решили мою проблему. Просто к вашему сведению, всем, кто, возможно, столкнулся с этой проблемой, довелось увидеть это, когда я остался чесать в затылке

Ответ №1:

Я полагаю, что проблема связана с путями, которые вы предоставляете expressStaticGzip

Вот руководство, которое предоставляет вам более подробную информацию о структуре каталогов и ее настройке. https://codeburst.io/express-brotli-webpack-a60773e7ec6c

  expressStaticGzip(path.join(__dirname)