Question

实际上我是Laravel社区的新手，我最终完成了我的网站：）

但我现在面临的是网站负载的缓慢。我已经最小化了我的照片尺寸。我被告知，在缩小所有css文件后，将css文件放在一个文件中是一种很好的方法，以便浏览器轻松获取它们。所以，我创建了一种动态方法来获取所有必需的css文件，并将它们组合在一个文件中，每个页面，我的解决方案是：

我的布局/ master.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

我的home.blade.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');

我的Routes.php页面

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

我的cssController：

module.exports

如果我不对，请指导我:)

Answer 1

我认为2-3 css文件没有问题。（不超过那个）但你应该压缩你的CSS / JavaScript文件，以减少文件的大小。使用此网站压缩您的文件： https://htmlcompressor.com/compressor/

并且有许多参数对网站速度有效。看网站GTmetric： https://gtmetrix.com/

这个网站科技你什么参数更有效。

使用http://tools.pingdom.com/fpt/

测试您的网站速度

Answer 2

您可以使用laravel elixir来实现这一目标在您的应用程序根目录中打开终端并安装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 docs这些会有所帮助我希望这有帮助

通过将CSS文件合并到一个文件中来加快网站 - Laravel

2 个答案: