Laravel mix 的压缩插件

Posted 2023-03-07

【中文标题】Laravel mix 的压缩插件

【英文标题】：Compression plugin with Laravel mix

【发布时间】：2020-02-29 15:44:33

【问题描述】：

我想在 npm run prod with laravel 之后生成压缩资源文件（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 run prod 之后，没有生成 .br 文件。

npm run prod ===> 跨环境 NODE_ENV=production 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 pro x64

【参考方案1】：

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

您的资产大小可能低于集合 threshold，这就是它们未被处理的原因。

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

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

将文件移至resources/assets。我这样说是因为您指的是仍然需要对它们进行预处理。 Laravel 项目中的常见做法是将分发就绪的资产保存在 public 文件夹中。

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

请注意，您可以通过连续调用 mix 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

【讨论】：

它高于阈值 ex 我有一个 528kB 的文件，我的资产在 public/css public/js 中

我修改了我的答案，可能是路径问题？类似：测试：/\.(js|css|html|svg)$/，包括：/\/public/,

再次更新了完整的webpack.mix.js文件，不是laravel mix的问题，我知道怎么用了。

@neoteknic 查看我的最新更新。我希望它能进一步阐明为什么您的组件没有被处理，并且有一个mix.js.br 输出，特别是在我最后一段的链接中。

谢谢，所以无法将它与脚本、样式一起使用？编译后不能concat文件和使用css或js工具来缩小、压缩等吗？

【参考方案2】：

不能直接使用 broli compress 和 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 run prod 之后，它将运行 laravel mix (scripts concat) + brotli 和 gzip compress 之后。您可以根据需要编辑压缩脚本。

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