如何在 Laravel Vapor 上加载关键 CSS答案

【问题标题】：How To Load Critical CSS on Laravel Vapor如何在 Laravel Vapor 上加载关键 CSS
【发布时间】：2022-11-29 06:22:59
【问题描述】：

PHP：8.0.2
拉维尔：9.19

我们正在使用“laravel-mix-criticalcss”来生成我们的关键 CSS。但是由于我们在部署网站时使用的是 Laravel Vapor，因此 CSS 资产会自动上传到 S3。如何最好地将关键 CSS 加载到标题中？

我们考虑尝试在 /resources 文件夹中生成关键 CSS 作为刀片模板 (index.css.blade.php)，但“laravel-mix-criticalcss”似乎不允许您自定义输出文件名。我们还考虑了使用 Mix 复制文件的相同解决方案，但是，似乎也无法修改文件名。

我们还考虑过从 S3 加载文件，但我想这会很慢。

另一个考虑因素是，通过 file_get_contents 加载 CSS 通常是最佳解决方案，这不会减慢服务器和 Vapor 的速度吗？是否有更适合蒸汽的最佳解决方案？

header.blade.php：

@if(file_exists('../public/css/index_critical.min.css'))
    <style>{!! file_get_contents('../public/css/index_critical.min.css') !!}</style>
@endif

webpack.mix.js:

mix.postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ])
    .criticalCss({
        enabled: mix.inProduction(),
        paths: {
            base: 'http://localhost:8081/',
            templates: 'public/css/',
        },
        urls: [
            {url: '', template: 'index'},
        ],
        options: {
            minify: true,
        },
    })
    .version();

【问题讨论】：

标签： laravel amazon-s3 laravel-9 laravel-vapor critical-css

【解决方案1】：

是的，您可以加载 css 文件，但这不是一个理想的解决方案，因为正如您提到的那样，它会减慢 API 速度并使响应大小变大。对于 API 网关，我们对请求/响应大小有一些限制。最好的解决方案就是使用 webpack(laravel-mix) 来设置正确的前缀。

只需像提到的文档那样更改路径中的基础。 https://docs.vapor.build/1.0/projects/deployments.html#code-splitting-dynamic-imports-with-mix

喜欢：

.criticalCss({
        enabled: mix.inProduction(),
        paths: {
            base: process.env.ASSET_URL + "/"
        }

【讨论】：