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

2024-01-05

实际上我是 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>

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

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

如果我不正确,请指导我:)


你可以使用 laravel Elixir 来实现 在你的应用程序根目录中打开终端并安装 npm (我猜你必须先安装nodejs)

npm install

安装完成后,转到你的 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

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

But the everything.css文件尚未缩小。 达到那种类型gulp --production在你的终端中

然后你将其添加到你的视图中

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

你可以输入gulp watch在您的终端中,因此每次您对文件进行更改时,混合/缩小文件也会编译并应用这些更改

检查Laravel 文档 https://laravel.com/docs/5.2/elixir这些会有所帮助 我希望这有帮助

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

通过将 CSS 文件合并到一个文件中来加快网站速度 - Laravel 的相关文章

随机推荐

  • Git 命令删除已删除上游的本地分支?

    有很多类似的问题 例如this one https stackoverflow com q 17983068 575530 or this one https stackoverflow com q 18081085 575530 但接受的
  • 使用qdial控制数字电位器

    我有一个 python 程序 可以使用 qt GUI 上的按钮控制数字电位器 效果很好 我正在尝试修改程序以使用 qdials 但除了电位器的拨号电阻或向下拨号电阻之外 无法弄清楚如何对其进行编程 要么是其中之一 要么是另一个 我将在下面发
  • SDL2硬件渲染的奇怪行为

    我想制作我的第一个游戏 没什么特别的 只是按下 WASD 键时蓝色矩形会移动 问题是 当我运行游戏时 矩形存在错误 见下图 错误仅在水平移动时出现 而不是垂直移动时出现 有趣的是 当我换行时 renderer SDL CreateRende
  • 如何将自定义服务添加到 ActiveStorage

    我想向 ActiveStorage 添加自定义服务 因为我想覆盖url的方法ActiveStorage 服务 S3Service https github com rails rails blob e970d15211a8efd7349ff
  • R 将工作目录设置为源文件位置?

    我读过这个主题 用于将工作目录设置为源文件位置的 R 命令 https stackoverflow com questions 13672720 r command for setting working directory to sour
  • 如何以指定的时间间隔定期自动调用 servlet [重复]

    这个问题在这里已经有答案了 必须定期调用servlet 就像android中的服务概念 这个怎么做 使用计时器或任何其他解决方案 提前致谢 扩展 JB Nizet 的评论 The 以前接受的答案 https stackoverflow co
  • 如何将实体框架 ICollection 更改为 ObservableCollection?

    因此 我对使用实体框架设计器制作 EDMX 来充当 MVVM 项目中的模型已经很感兴趣了 我刚刚遇到一个问题 我很确定ICollection lt gt 这是生成的代码 例如见下文 确实需要是ObservableCollection lt
  • 您的应用程序包含非公共 API 使用 - 提交应用程序

    我正在尝试使用 XCode 向 Itunes connect 提交申请 我明白了 您的应用程序包含非公共 API 使用 请检查错误 更正它们并重新提交您的申请 该应用程序引用 Payload myapp app setSoundsEnabl
  • DLL 版本控制错误

    我有一个网站偶尔会抛出以下错误 应用程序中的服务器错误 无法加载文件或程序集 ICSharpCode SharpZipLib Version 0 85 3 365 Culture neutral PublicKeyToken 1b03e6a
  • 使用 vssClientCredentials 进行 VSTS 身份验证

    我目前正在尝试使用下面的代码连接到 VSTS 项目 之前在显示的对话框中输入凭据后已成功连接 if IsConnected sourceControl release SourceControl connection new VssConn
  • 停止对 html 的多次提交

    所以我用谷歌搜索了这个问题 他们都给出了相同的代码 但它从来没有工作过 我希望只能单击该按钮一次 这样您就不能多次单击该按钮发送垃圾邮件 这是我的 HTML
  • Omniauth-facebook 取消按钮

    我已经开始将 Facebook 身份验证集成到我的 Rails 3 1 站点中 但当我单击 Facebook 身份验证对话框上的取消按钮时遇到了问题 当我单击取消时 我会被重定向回我的网站 auth facebook callback 然后
  • 我应该在 Django Rest Framework 中使用 JWT 还是基本令牌身份验证?

    我即将使用 Django Rest Framework 在我的 API 中实现令牌身份验证 但我不确定我是否应该使用基本令牌内置 DRF 或使用 JSON Web 令牌 JWT 标准 使用这个包djangorestframework jwt
  • Jenkins - Git 子模块凭证与父存储库不同

    背景 Jenkins 用于从具有 Git 子模块的 Git 存储库构建工件 子模块与父项目不在同一存储库中 甚至不在同一端点 问题是父存储库检查正常 因为凭证 ssh 密钥 A 与主 父存储库关联 但毫不奇怪 在子模块上失败 因为凭证 ss
  • Access 2007 VBA:使用另一个列表框中的选择构建一个列表框

    因此 每个订单可能有 8 个类别 但不一定是所有类别 因此 我打算构建一个列表框 允许用户在打开 订单详细信息 表单 未绑定表单 其中隐藏了包含所有所需 ID 号的文本框 时双击他们希望关联的每个类别 我想在它旁边有另一个空文本框 它允许我
  • 如何安装 Eclipse EPP(例如 3.8 上的 EPP 建模功能)?

    如何通过 3 8 版本的软件安装程序安装 Eclipse EPP 我想选择 EPP 建模功能 并安装其所有软件包 而不是单独选择它们 例如 如果我安装 Eclipse Juno Eclipse Modeling Tools 然后查看已安装的
  • 如何让 Subversion 使用 Linux 系统帐户进行​​身份验证?

    我已经设置了一个带有 Apache WebDAV 接口的 Ubuntu Server for Subversion 以便与其他开发人员共享存储库 我的问题是 如何让 Subversion 使用 Linux 系统帐户进行 身份验证 这将使 S
  • 无法连接到 IB 中的子视图

    快问 使用 IB 我在 ViewController 中有一个子视图 在该子视图中 我有一个标签 我想将其连接到我的自定义子视图类 然而IB不让我这么做 我缺少什么 我还尝试以编程方式添加标签 然而 框架似乎从未设定过 我可以对标签的大小进
  • 将 Google 文档脚本更新到 Google 云端硬盘(将带有标签的电子邮件存档到云端硬盘)

    我的脚本将带有特定标签的电子邮件的 pdf 版本保存到 Google 云端硬盘 我有针对三个不同标签的三个几乎相同的脚本版本 并且定期运行它们 最近 由于 DocsList 的贬值 他们停止了工作 我将 DocsList 的所有实例更改为
  • 通过将 CSS 文件合并到一个文件中来加快网站速度 - Laravel

    实际上我是 Laravel 社区的新人 我终于完成了我的网站 但我现在面临的是网站加载缓慢 我已经最小化了图片的尺寸 有人告诉我 在缩小所有 css 文件后将 css 文件放入一个文件中是一种好方法 以便浏览器轻松获取它们 因此 我创建了一