Question

我想在laravel使用npm运行prod之后生成压缩的资源文件（br或gz）。

我的（简化的）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或.js文件旁边生成.css.br .js.br ... 但是 npm运行prod 之后，没有生成.br文件。

npm run prod ===>跨环境NODE_ENV =生产node_modules / webpack / bin / webpack.js --no-progress --hide-modules --config = node_modules / laravel-mix / setup / webpack.config.js

它输出一个mix.js.br文件，但我不知道此文件的来源在哪里？

如何做到？

npm版本：6.12.1 节点版本：12.13 操作系统：Windows 10专业版x64

Answer 1

您的混合配置看起来还不错。

您的资产规模可能低于集合threshold，这就是为什么资产没有得到处理的原因。

如果您的资产仍小于2KB，则可能不需要在项目中进行资产压缩。

正如您提到的在webpack.mix.js末尾添加内容一样，我假设它与the out of box one相同。

将文件移动到resources/assets。我之所以这样说，是因为您提到仍然需要对其进行预处理。 Laravel项目的常见做法是将可分发的资产保留在public文件夹中。

resources/assets中的文件将需要注册为要使用js或css或其他mix APIs进行预处理的组件。

请注意，您可以通过依次调用混合API方法或使用通配符来注册一个或多个entrypoints。

例如，要分别处理resources/assets/js中的所有Javascript files via Webpack 。一个人可以写：

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

Mix API通过Webpack，Babel或普通任务处理组件。

mix.scripts是使用plain old task的API处理组件之一。

只要您的所有组件都未注册可通过Webpack处理，就不会应用Webpack配置中添加的压缩插件。

当前，mix.js.br是mix项目中一个hack遗留下来的，用来满足Webpack中条目的要求。参见https://github.com/JeffreyWay/laravel-mix/blob/v5.0.0/src/webpackPlugins/MockEntryPlugin.js

Answer 2

不可能与laravel mix.script或mix.styles一起直接使用broli compress，最好的方法是安装：

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（脚本concat）+ brotli和gzip compress之后。您可以根据需要编辑compress脚本。

您可以直接提供br和gzip文件，以避免使用apache / nginx对每个请求进行压缩，从而节省时间和CPU！

具有Laravel混合功能的压缩插件

2 个答案: