Shlop
@Shlop
Программист

Как вставлять критически css в Laravel?

Здравствуйте, подскажите пожалуйста, есть проект на Laravel 5.2.
Google pagespeed пишет "Устраните ресурсы, блокирующие отображение".
Как я понимаю критические css правила нужно вынести в <head>, а сам файл css подключить асинхронно.

Вопрос в том как это сделать на Laravel ? К примеру инструмент critical
Он же не будет вставлять в view файлы css. Я только подумал может сделать что бы critical сгенерировал файл критических стилей, и потом вручную скопировать эти стили в <head>, может это как вариант.
Подскажите пожалуйста как можно сделать ?

Заранее благодарю за ответ
  • Вопрос задан
  • 96 просмотров
Решения вопроса 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега Laravel
critical сгенерировал файл критических стилей, и потом вручную скопировать эти стили
Зачем копировать руками, если содержимое файла можно прочитать и добавить программно?
Ответ написан
@svm
У меня реализовано такое через webpack.

В webpack.config.js

const css = {
    name: 'css',
    mode: "production",
    entry: {
        global:     './resources/css/global.js',
    },
    output: {
        path: path.resolve(__dirname, 'public/assets'),
        filename: '[name].[contenthash].js',
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]

            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css'
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "resources/css/template_inline_css.ejs",
            filename: path.resolve(__dirname, 'resources/views/inline/css.blade.php'),
            inject: false,
            publicPath: '/assets',
        }),
    ],
}


В template_inline_css.ejs
<% let styles = htmlWebpackPlugin.files.css; %>

<% for (let style of styles) { %>
    @push('<%= style.replace(/\/.+\/(.+?)\..+/, '$1') %>_css')
        <style><%= compilation.assets[style.substr(htmlWebpackPlugin.files.publicPath.length)].source() %></style>
    @endpush
<% } %>


Затем можно подключить это в любом blade шаблоне
@include('inline.css')
@stack('global_css')

Краткая суть работы такая:
webpack скачала преобразует css код, потом MiniCssExtractPlugin его извлекает, затем HtmlWebpackPlugin его вставляет туда, куда ему сказано в переданных параметрах и по заданному шаблону ejs.
При желании подключение в blade через push можно убрать в шаблоне template_inline_css.ejs. Я это для себя делал, так как нужна была универсальность, чтобы можно было сделать несколько точек входа.

Как итог: все работает автоматически, хоть и сложно устроено.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы