Плагин сжатия с Laravel микс - PullRequest
0 голосов
/ 04 ноября 2019

Я хочу генерировать сжатые файлы ресурсов (br или gz) после того, как npm запустит prod с laravel.

Мой (упрощенный) webpack.mix.js (примерно тоже самое с mix.styles):

const mix = require('laravel-mix');

mix.options({
    cleanCss: {
        level: {
            1: {
                specialComments: 'none'
            }
        }
    },
    purifyCss: true
});


mix.scripts([
    'node_modules/popper.js/dist/umd/popper.min.js',
    'node_modules/bootstrap/dist/js/bootstrap.min.js',
    'node_modules/toastr/build/toastr.min.js',
    'resources/js/material/custom.js',
    'resources/js/material/waves.js',
    'node_modules/socket.io-client/dist/socket.io.js',
    'node_modules/laravel-echo/dist/echo.iife.js'
],'public/js/admin-all.js');

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

mix.webpackConfig({
    plugins: [

        new CompressionPlugin({
            filename: '[path].br[query]',
            algorithm: 'brotliCompress',
            test: /\.(js|css|html|svg)$/,
            compressionOptions: { level: 11 },
            minRatio: 1,
            deleteOriginalAssets: false,
        }),
    ]
});

Я хочу создать .css.br .js.br ... рядом с файлами .css или .js в общей папке, но после npm запустите prod , нет .brСгенерированный файлlaravel-mix / setup / webpack.config.js

Он выводит файл mix.js.br, но я не знаю, где находится этот файл ??

Каксделать это?

npm версия: 6.12.1 версия узла: 12.13 os: Windows 10 pro x64

Generated file, no .br but one strange mix.js.br

Ответы [ 2 ]

0 голосов
/ 06 ноября 2019

Невозможно использовать сжатие broli с laravel mix.script или mix.styles, лучший способ сделать это - установить:

npm install bread-compressor-cli -D

и отредактировать ваш пакет package.json следующим образом:

"prod": "npm run production && npm run compress",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"compress": "bread-compressor -s public/css/*.css public/js/*.js"

после того, как вы просто используете npm, запустите prod, и он запустит laravel mix (scripts concat) + brotli и gzip compress после. Вы можете редактировать скрипт сжатия в соответствии с вашими потребностями.

Вы можете напрямую обслуживать файлы br и gzip, чтобы избежать сжатия при каждом запросе с помощью apache / nginx, чтобы сэкономить время и процессор!

0 голосов
/ 04 ноября 2019

Ваша конфигурация микса выглядит хорошо.

Размер ваших активов, вероятно, ниже установленного threshold, и поэтому они не обрабатываются.

Вы можетене нужно сжатие активов в вашем проекте, если ваши активы по-прежнему меньше 2 КБ.

Как вы упомянули добавление в конец вашего webpack.mix.js, я предположил, что оно будет таким же, как изкоробка одна .

Переместить файлы в resources/assets. Я говорю это, потому что вы говорите о необходимости их предварительной обработки. Обычная практика в проектах Laravel - хранить готовые к распространению активы в папке public.

Файлы, теперь находящиеся в resources/assets, необходимо будет зарегистрировать как компоненты для предварительной обработки с использованием js или css илидругие смешанные API .

Обратите внимание, что вы можете зарегистрировать одну или несколько точек входа , последовательно вызывая методы смешивания API или используя символы подстановки.

Например,обрабатывать все Javascript-файлы через Webpack отдельно в resources/assets/js. Можно написать:

mix.js('resources/assets/js/**/*.js', 'public/js');

Смешивать компоненты процессов API с помощью Webpack, Babel или простой задачи.

mix.scripts является одним из компонентов обработки APIиспользуя обычное старое задание .

Пока ни один из ваших компонентов не зарегистрирован для обработки через Webpack, плагин сжатия, добавленный в конфигурацию Webpack, не будет применен.

В настоящее время mix.js.br является остатком хака в проекте mix, чтобы удовлетворить требование для входа в Webpack. См https://github.com/JeffreyWay/laravel-mix/blob/v5.0.0/src/webpackPlugins/MockEntryPlugin.js

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...