如何解决CSS加载缓慢并导致使用Blade和Vue在Laravel应用上产生临时的奇怪格式
我有一个Laravel应用,该应用在刀片模板中使用了一小部分Vue代码。在视图之间导航时会出现问题,几乎每次加载CSS之前都会有短暂的延迟,在此之前,页面的原始文本没有任何格式显示。它显示大约1/2秒,然后CSS插入,看起来正确。我找不到任何原因,我尝试更改mix('css / app.css')等,以便不必每次都重新加载,但我不知道如何解决它。
我不确定Vue是否会以某种方式延迟CSS的加载?有什么想法吗?我将在下面粘贴刀片模板的顶部。我刚刚升级到Laravel 8,但是Laravel 7也在发生同样的事情。
感谢您的帮助!
<!doctype html>
<html lang="{{ str_replace('_','-',app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="title" content="Pono Admin">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Admin</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<link href="{{ mix('css/admin.css') }}" rel="stylesheet">
@hasSection('style')
@yield('style')
@endif
<!-- Scripts -->
@hasSection('script')
@yield('script')
@else
<script>
var vmMixinsAdmin = '';
</script>
@endif
<script src="{{ mix('/js/app.js') }}" defer></script>
<script>
var vmMixinsApp = '';
let vroundedBtn = false;
let vunreadNotificationCount = {{ auth()->user()->unreadNotifications()->count() }};
</script>
</head>
<body>
<div id="vm">
<main id="app-main" class="container-fluid px-0">
etc
解决方法
有人有类似的想法,并决定在前景上显示一个叠加层,并在页面加载后将其隐藏。我不确定这是否是最好的解决方案,但可能会有所帮助:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。