optimize loading css

This commit is contained in:
Pig Fang 2020-05-21 10:52:14 +08:00
parent 93880b5ac1
commit d1afc6645c
4 changed files with 32 additions and 7 deletions

View File

@ -4,6 +4,7 @@ namespace App\Http\View\Composers;
use App\Services\Webpack;
use Illuminate\Contracts\Events\Dispatcher;
use Illuminate\Http\Request;
use Illuminate\Support\Arr;
use Illuminate\Support\Str;
use Illuminate\View\View;
@ -16,10 +17,17 @@ class HeadComposer
/** @var Dispatcher */
protected $dispatcher;
public function __construct(Webpack $webpack, Dispatcher $dispatcher)
{
/** @var Request */
protected $request;
public function __construct(
Webpack $webpack,
Dispatcher $dispatcher,
Request $request
) {
$this->webpack = $webpack;
$this->dispatcher = $dispatcher;
$this->request = $request;
}
public function compose(View $view)
@ -75,10 +83,12 @@ class HeadComposer
{
$links = [];
$links[] = [
'rel' => 'stylesheet',
'rel' => 'preload',
'as' => 'style',
'href' => 'https://cdn.jsdelivr.net/npm/@blessing-skin/admin-lte@3.0.4/dist/admin-lte.min.css',
'integrity' => 'sha256-nr8InsK/i0Skb3n3yHCVwEnsmblkae4Rs9aFJ4/JTWE=',
'crossorigin' => 'anonymous',
'onload' => "this.rel = 'stylesheet'",
];
$links[] = [
'rel' => 'preload',
@ -93,14 +103,25 @@ class HeadComposer
'crossorigin' => 'anonymous',
];
$links[] = [
'rel' => 'stylesheet',
'rel' => 'preload',
'as' => 'style',
'href' => 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css',
'integrity' => 'sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=',
'crossorigin' => 'anonymous',
'onload' => "this.rel = 'stylesheet'",
];
$links[] = ['rel' => 'stylesheet', 'href' => $this->webpack->url('style.css')];
if (!$this->request->is('/')) {
$links[] = [
'rel' => 'preload',
'as' => 'style',
'href' => $this->webpack->url('style.css'),
'crossorigin' => 'anonymous',
'onload' => "this.rel = 'stylesheet'",
];
}
$view->with('links', $links);
$view->with('inline_css', option('custom_css'));
$view->with('custom_cdn_host', option('cdn_address'));
}
public function addExtra(View $view)

View File

@ -1,3 +1,5 @@
@import '../fonts/minecraft.css';
body {
font-size: 16px;
}

View File

@ -2,7 +2,7 @@
<html lang="{{ locale }}">
<head>
{{ include('shared.head') }}
<link rel="stylesheet" href="{{ home_page_css }}">
<link rel="preload" as="style" href="{{ home_page_css }}" crossorigin="anonymous" onload="this.rel = 'stylesheet'">
<link rel="preload" as="image" href="{{ home_pic_url }}">
<title>{{ site_name }}</title>
<style>

View File

@ -6,13 +6,15 @@
<meta name="keywords" content="{{ seo.keywords }}">
<meta name="description" content="{{ seo.description }}">
{{ seo.extra|striptags('<meta>')|raw }}
<link rel="preconnect" href="https://cdn.jsdelivr.net/" crossorigin>
<link rel="preconnect" href="{{ custom_cdn_host }}" crossorigin>
<script>
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js?v1')
})
</script>
{% for link in links %}
<link{% for attribute, value in link %} {{ attribute }}="{{ value }}"{% endfor %}>
<link{% for attribute, value in link %} {{ attribute }}="{{ value|raw }}"{% endfor %}>
{% endfor %}
<link rel="shortcut icon" href="{{ favicon }}">
<link rel="icon" type="image/png" href="{{ favicon }}" sizes="192x192">