Более быстрый веб-сайт, объединяя файлы CSS в одном файле – Laravel
На самом деле я новичок в сообществе Laravel, и я наконец закончил свой сайт 🙂
Но теперь я сталкиваюсь с медленностью загрузки веб-сайта. Я уменьшил размер моих фотографий. И мне сказали, что это хороший способ поместить ваши файлы css в один файл после того, как вы измельчите все файлы css, чтобы упростить браузер для их получения. Итак, я создал динамический способ получить все необходимые файлы css и объединить их в один файл для каждой страницы, мое решение:
- Есть ли способ переписать LESS-переменную с помощью компилятора LESS в PHP?
- Как сделать меньше для работы с бассетом в laravel 4?
Мои макеты / 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> Моя страница home.blade.php:
@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
Моя страница 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');
Мой 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); } }
Пожалуйста, направляйте меня, если я не прав 🙂
Related of "Более быстрый веб-сайт, объединяя файлы CSS в одном файле – Laravel"
Вы можете использовать эликсир laravel, чтобы добиться того, что в корне вашего приложения откройте ваш терминал и установите npm (сначала вы должны установить nodejs)
npm install
после завершения установки перейдите в свой gulpfile.js и выполните работу
Пример 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'); });
снова откройте терминал (корневая папка как обычно) и введите gulp
этот пример будет смешивать все файлы в public/css/need с одним файлом, находящимся в public/css/everything.css
вы можете сделать это и для скриптов
Но файл everything.css еще не проинструктирован. для достижения этого типа gulp --production в вашем терминале
то вы добавляете это в свой вид
<link rel='stylesheet' href='{{ url("css/everything.css") }}' type='text/css' media='all' />
и вы можете набирать gulp watch в своем терминале, поэтому каждый раз, когда вы вносите изменения в свои файлы, смешанный / мини-файл будет компилироваться и применять эти изменения
проверьте документы laravel, это поможет мне надеяться, что это поможет
Я думаю, что нет проблем с 2-3 css-файлами. (не более того), но вы должны сжать ваши файлы css / javascript, чтобы уменьшить размер файлов. используйте этот сайт для сжатия ваших файлов: https://htmlcompressor.com/compressor/
и есть много параметров, которые эффективны для скорости веб-сайта. см. сайт GTmetric: https://gtmetrix.com/
этот сайт вамчет, какие параметры более эффективны. 
Проверьте скорость своего сайта с помощью http://tools.pingdom.com/fpt/.