Schnellere Website von CSS-Dateien in einer einzigen Datei kombiniert - Laravel

Eigentlich bin ich neu in Laravel Gemeinschaft, und ich habe meine Website endlich fertig :)Schnellere Website von CSS-Dateien in einer einzigen Datei kombiniert - Laravel

Aber was ich bin vor ist jetzt die Langsamkeit der Lade Webseite. Ich habe die Größe meiner Bilder minimiert. Und mir wurde gesagt, dass es eine gute Möglichkeit ist, Ihre CSS-Dateien in einer Datei zu speichern, nachdem alle CSS-Dateien minimiert wurden, damit der Browser sie einfach abrufen kann. Also, ich habe eine dynamische Art und Weise erstellt alle erforderlichen CSS-Dateien zu holen und sie für jede Seite in einer Datei zusammenfassen, meine Lösung ist:

Meine Layouts/master.blade.php:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="{{route('css.main',['route_name'=>Route::currentRouteName()])}}"> 
</head> 
<body> 

    <h1>This is a Heading</h1> 
    <p>This is a paragraph.</p> 
    @yield('content') 
</body> 
</html>

My home .blade.php Seite:

@extends('layouts.master') 
@section('content') 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-10 col-md-offset-1"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Welcome</div> 
       <div class="panel-body"> 
        My Applications Landing Page. 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
@endsection

Meine routes.php Seite

Route::any('/page1', "[email protected]")->name('page1'); 
Route::any('/page2', "[email protected]")->name('page2'); 
Route::get('/css/{route_name}/main.css', "[email protected]")->name('css.main');

Mein 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); 
    } 
}

Bitte führen Sie mich, wenn Ich bin nicht :)

Quelle

2016-05-05 Rashid

Sie Laravel Elixier verwenden können, die in Ihrer App root Terminal öffnen und npm installieren zu erreichen (Sie NodeJS installieren müssen zuerst erraten i)

npm install

nach Abschluss der Installation, gehen Sie zu Ihrem gulpfile.js und die Arbeit

Exemple Css mix

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'); 
});

Terminal wieder öffnen (Stammordner wie üblich) und geben Sie gulp

diese exemple wird in public/css/need in einer Datei alle Dateien mischen Sie sich in public/css/everything.css

kann das auch mit Skripten tun

Aber die everything.css Datei ist noch nicht minimiert. diese Art gulp --production in Ihrem Terminal zu erreichen

dann fügen Sie diese zu Ihrer Ansicht

<link rel='stylesheet' href='{{ url("css/everything.css") }}' type='text/css' media='all' />

und Sie gulp watch in Ihrem Terminal eingeben können so jedes Mal, wenn Sie ändern, um Ihre Dateien der gemischten/minimierte machen Datei kompilieren zu und gelten diese Änderungen

Überprüfung der laravel docs diese würden helfen, wie ich hoffe, das hilft

Quelle

2016-05-06 00:12:03

Great Solution man! – Rashid

Froh, das zu hören, weiter so, Kumpel –

korrigieren denke ich, gibt es kein Problem mit 2-3 CSS-Dateien ist. (nicht mehr als das) aber Sie sollten Ihre CSS/Javascript-Dateien komprimieren, um die Größe der Dateien zu verringern. Verwenden Sie diese Website, um Ihre Dateien zu komprimieren: https://htmlcompressor.com/compressor/

und es gibt viele Parameter, die effektiv Website-Geschwindigkeit. siehe Website GTmetric: https://gtmetrix.com/

Diese Website Tech Sie, welche Parameter effektiver.

Testen Sie Ihre Website Geschwindigkeit mit http://tools.pingdom.com/fpt/

Quelle

2016-05-05 22:26:01 aghilpro

Sie haben Recht, aber ich habe mehr als 15 CSS-Dateien. und jede Seite benötigt 5 bis 7 CSS-Dateien. – Rashid

@Rashid Das sind zu viele CSS-Dateien. 2-3 Dateien sind in Ordnung. kombinieren einige von denen. – aghilpro

benutze laravel elixier, um css/js zu verkleinern und zusammenzufügen, überprüfe die laracasts dafür –

Schnellere Website von CSS-Dateien in einer einzigen Datei kombiniert - Laravel

Antwort

Verwandte Themen