Php 通过将CSS文件合并到一个文件中来提高网站速度-Laravel_Php_Css_Laravel_Sass_Less

Php 通过将CSS文件合并到一个文件中来提高网站速度-Laravel

php css laravel sass less

Php 通过将CSS文件合并到一个文件中来提高网站速度-Laravel,php,css,laravel,sass,less,Php,Css,Laravel,Sass,Less,事实上，我是新加入Laravel社区的，我终于完成了我的网站：）但我现在面临的是网站加载的缓慢。我把我的照片缩小了。有人告诉我，缩小所有css文件后，将css文件放在一个文件中是一种很好的方法，这样浏览器就可以轻松地获取它们。因此，我创建了一种动态方式来获取所有必需的css文件，并将它们组合到每个页面的一个文件中，我的解决方案是：我的布局/master.blade.php： <!DOCTYPE html> <html> <head> <tit

事实上，我是新加入Laravel社区的，我终于完成了我的网站：）

但我现在面临的是网站加载的缓慢。我把我的照片缩小了。有人告诉我，缩小所有css文件后，将css文件放在一个文件中是一种很好的方法，这样浏览器就可以轻松地获取它们。因此，我创建了一种动态方式来获取所有必需的css文件，并将它们组合到每个页面的一个文件中，我的解决方案是：

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

我的CSS控制器：

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

如果我不正确，请指导我：）

我认为2-3个css文件没有问题。（仅此而已）但您应该压缩css/javascript文件以减小文件大小。使用此网站压缩您的文件：

而且有许多参数对网站速度有效。参见站点GTmetric：

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

用

测试你的网站速度。你可以用拉维长生不老药来达到这个目的在应用程序根目录中打开终端并安装npm （我想你必须先安装nodejs）

完成安装后，转到gulpfile.js 做这项工作

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

此示例将

public/css/need

中的所有文件混合到

public/css/everything.css

您也可以对脚本执行此操作

但是

everything.css

文件还没有缩小。要在终端中实现该类型的

gulp--production

然后将其添加到视图中

您可以在终端中键入

gulpwatch

，这样每次更改文件时，混合/缩小的文件也会编译并应用这些更改

检查一下这些是否有用

我希望这有帮助

你是对的，但我有超过15个css文件。每个页面需要5到7个css文件。@Rashid，css文件太多了。2-3个文件就可以了。使用laravel elixir缩小和合并css/js，检查Laracast

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

npm install

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