通过将CSS文件组合到一个文件中来提高网站访问速度-Laravel [英] Faster website by combining CSS files in one file - Laravel
问题描述
实际上我是Laravel社区的新手，我终于完成了我的网站:)
Actually I am new in Laravel community, and I have finished my website finally :)
但是我现在面临的是网站加载速度缓慢.我已将图片的尺寸最小化.有人告诉我，这是将所有CSS文件缩小后将CSS文件放入一个文件中的一种好方法，以使浏览器轻松提取它们.因此，我创建了一种动态方式来获取所有必需的css文件，并将它们组合到每个页面的一个文件中，我的解决方案是:
But what I am facing now is the slowness of the website's loading. I have minimised the size of my pictures. And I have been told that it is a good way to put your css files in one file after minifying all of css files to make it easy for browser to fetch them. So, I have created a dynamic way to fetch all required css files and combine them in one file for each page, my solution is :
我的布局/master.blade.php:
My 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>
我的home.blade.php页面:
My home.blade.php page:
@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页面
My Routes.php page
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:
My 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);
}
}
如果我不正确，请引导我:)
Please guide me if I'am not correct :)
推荐答案
您可以使用laravel长生不老药来实现这一目标 在您的应用程序根目录中，打开您的终端并安装npm (我猜你必须先安装nodejs)
You can use laravel elixir to achieve that in your app root open your terminal and install npm (you have to install nodejs first i guess)
npm install
完成安装后，转到您的gulpfile.js 并做工作
after finishing the installation, go to your gulpfile.js and do the work
示例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');
});
再次打开终端(像往常一样是根文件夹)，然后键入gulp
open your terminal again (root folder as usual) and type gulp
此示例将public/css/need中的所有文件混合到public/css/everything.css
this exemple will mix all the files in public/css/need to one file located in public/css/everything.css
您也可以对脚本执行此操作
you can do this to scripts too
但是everything.css文件尚未缩小.
在终端中实现gulp --production类型
But the everything.css file is not minified yet.
to achieve that type gulp --production in your terminal
然后将其添加到视图
<link rel='stylesheet' href='{{ url("css/everything.css") }}' type='text/css' media='all' />
，您可以在终端中键入gulp watch，这样，每次更改文件时，混合/缩小的文件也将编译并应用这些更改
and you can type gulp watch in your terminal so every time you make change to your files the mixed/minified file will compile too and apply these changes
检查 laravel文档 这些将有所帮助 希望对您有帮助
check the laravel docs these would help I hope this helps
这篇关于通过将CSS文件组合到一个文件中来提高网站访问速度-Laravel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
