Как установить заголовки метаданных Content-Encoding со сжатием webpack?

Question

Я люблю npm run watch, но мой несжатый пакет составляет 7,5 МБ.Я также туннелирую его через ngrok для использования HTTPS (и использования команды).Поэтому для перезагрузки страницы требуется достаточно много времени, чтобы проверить, работает ли обновление CSS, как ожидалось.

Было бы очень хорошо, если бы я мог предоставить gzip-версию во время разработки ... Но всякий раз, когда я создаю app.js.gz локально, заголовки метаданных не установлены правильно.

В AWS S3 я легко могу установить заголовки: Content-Encoding: gzip и Content-Type: text/javascript

Через корзину S3, этиЗаголовки метаданных сообщают браузеру, что нужно накачать файл, а затем сайт отображается правильно.

Однако я пытаюсь сделать это локально без S3, поэтому мне не нужно ждать времени загрузки.Итак, как я могу установить эти метаданные?С вебпаком?С апачем?Другой?

Я использую серверную часть Laravel и React-Redux с compression-webpack-plugin

Вот мой webpack.mix.js:

const mix = require('laravel-mix');
const CompressionPlugin = require('compression-webpack-plugin');

mix.react('resources/js/app.js', 'public/js')
    .webpackConfig({
        plugins: [
            new CompressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: /\.js$|\.css$|\.html$|\.svg$/,
                threshold: 10240,
                minRatio: 0.8,
            }),
        ],
    });

Без правильных заголовков метаданных браузер не знает, как надуть файл gzipped, поэтому я просто получаю консольную ошибку: Uncaught SyntaxError: Invalid or unexpected token

Answer 1

Это возможно:

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

Взгляните на этот файл в качестве образца.Он применяет минификацию и сжатие (как gzip, так и Brotli) для производственных сборок, но это можно изменить.