Sitio web más rápido combinando archivos CSS en un archivo – Laravel

En realidad, soy nuevo en la comunidad de Laravel, y finalmente terminé mi sitio web 🙂

Pero lo que estoy enfrentando ahora es la lentitud de la carga del sitio web. He minimizado el tamaño de mis imágenes. Y me han dicho que es una buena manera de poner sus archivos css en un solo archivo después de minificar todos los archivos css para que el navegador los obtenga fácilmente. Por lo tanto, he creado una forma dinámica de obtener todos los archivos CSS necesarios y combinarlos en un archivo para cada página, mi solución es:

Mis diseños / master.blade.php:

   Page Title Route::currentRouteName()])}}">   

This is a Heading

This is a paragraph.

@yield('content')

Mi página home.blade.php:

 @extends('layouts.master') @section('content') 
Welcome
My Applications Landing Page.
@endsection

Mi página Routes.php

 Route::any('/page1', "homeController@foo1")->name('page1'); Route::any('/page2', "homeController@foo2")->name('page2'); Route::get('/css/{route_name}/main.css', "cssController@main")->name('css.main'); 

Mi cssController:

 namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Requests; use File; class cssController extends Controller { public function main($route_name){ header('Content-Type: text/css'); $requirements =[ 'page1'=>[ 'styel1.css', 'styel2.css', ], 'page2'=>[ 'styel3.css', 'styel4.css', ], ]; $css = []; // include bootstrap $css[] = '@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");'; $css[] = '@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");'; foreach($requirements[$route_name] AS $css_file){ $css[] = File::get(storage_path('app/public/css/'.$css_file)); } return implode(' ',$css); } } 

Por favor, guíame si no estoy en lo correcto 🙂

Puede usar laravel elixir para lograr eso en la raíz de su aplicación, abra su terminal e instale npm (primero debe instalar nodejs, supongo)

 npm install 

después de terminar la instalación, vaya a su gulpfile.js y haga el trabajo

Ejemplo de mezcla de CSS

 elixir(function(mix) { mix.styles([ "normalize.css", "style.css", "bootstrap.css", "docs.css", "all.css", "bt.css", "a.css", "font-awesome.min.css" ], 'public/css/everything.css', 'public/css/need'); }); 

abra nuevamente su terminal (carpeta raíz como de costumbre) y escriba gulp

este ejemplo mezclará todos los archivos en public/css/need a un archivo ubicado en public/css/everything.css

también puedes hacer esto con los guiones

Pero el archivo everything.css aún no está minificado. para lograr ese tipo de gulp --production en tu terminal

luego agregas esto a tu vista

y puede escribir gulp watch en su terminal para que cada vez que realice cambios en sus archivos, el archivo mixto / minificado compile también y aplique estos cambios

compruebe los documentos de Laravel estos ayudarían espero que esto ayude

Creo que no hay problema con 2-3 archivos CSS. (no más que eso) pero debe comprimir sus archivos css / javascript para disminuir el tamaño de los archivos. utilice este sitio web para comprimir sus archivos: https://htmlcompressor.com/compressor/

y hay muchos parámetros que son efectivos para la velocidad del sitio web. ver el sitio GTmetric: https://gtmetrix.com/

este sitio te informa qué parámetros son más efectivos. enter image description here

Pon a prueba la velocidad de tu sitio web con http://tools.pingdom.com/fpt/