fix: assets load

moonshine-software · Nov 2, 2023 · 8b1a23c · 8b1a23c
1 parent f96e9af
commit 8b1a23c
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 77 deletions.
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
@@ -2,27 +2,20 @@
 
 namespace App\Providers;
 
+use Illuminate\Support\Facades\Vite;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
 {
-    /**
-     * Register any application services.
-     *
-     * @return void
-     */
-    public function register()
+    public function boot(): void
     {
-        //
-    }
+        Vite::useScriptTagAttributes([
+            'async' => true,
+            'rel="prefetch" as' => 'script',
+        ]);
 
-    /**
-     * Bootstrap any application services.
-     *
-     * @return void
-     */
-    public function boot()
-    {
-        //
+        Vite::useStyleTagAttributes([
+            'rel="preload" as' => 'style',
+        ]);
     }
 }
diff --git a/public/build/assets/app.c530671b.css b/public/build/assets/app.c530671b.css
diff --git a/public/build/assets/app.efe52697.css b/public/build/assets/app.efe52697.css
diff --git a/public/build/assets/app.c4651ef5.js → public/build/assets/app.f0294bb5.js b/public/build/assets/app.c4651ef5.js → public/build/assets/app.f0294bb5.js
diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -1,92 +1,88 @@
 {
-  "resources/fonts/Gilroy-Bold.woff2": {
-    "file": "assets/Gilroy-Bold.05391b44.woff2",
-    "src": "resources/fonts/Gilroy-Bold.woff2"
-  },
   "resources/fonts/Gilroy-Medium.woff2": {
     "file": "assets/Gilroy-Medium.e61f2165.woff2",
     "src": "resources/fonts/Gilroy-Medium.woff2"
   },
-  "resources/fonts/Gilroy-SemiBold.woff2": {
-    "file": "assets/Gilroy-SemiBold.d8e57f7f.woff2",
-    "src": "resources/fonts/Gilroy-SemiBold.woff2"
-  },
-  "resources/images/cases/blog.jpg": {
-    "file": "assets/blog.a5720d97.jpg",
-    "src": "resources/images/cases/blog.jpg"
-  },
-  "resources/fonts/Gilroy-Black.woff2": {
-    "file": "assets/Gilroy-Black.cf204b09.woff2",
-    "src": "resources/fonts/Gilroy-Black.woff2"
-  },
   "resources/fonts/Gilroy-Regular.woff2": {
     "file": "assets/Gilroy-Regular.8ae963ef.woff2",
     "src": "resources/fonts/Gilroy-Regular.woff2"
   },
-  "resources/images/cases/chatbot.jpg": {
-    "file": "assets/chatbot.917c1091.jpg",
-    "src": "resources/images/cases/chatbot.jpg"
+  "resources/fonts/Gilroy-Black.woff2": {
+    "file": "assets/Gilroy-Black.cf204b09.woff2",
+    "src": "resources/fonts/Gilroy-Black.woff2"
   },
-  "resources/images/cases/cms.jpg": {
-    "file": "assets/cms.0e783a77.jpg",
-    "src": "resources/images/cases/cms.jpg"
+  "resources/fonts/Gilroy-Bold.woff2": {
+    "file": "assets/Gilroy-Bold.05391b44.woff2",
+    "src": "resources/fonts/Gilroy-Bold.woff2"
   },
-  "resources/images/cases/news.jpg": {
-    "file": "assets/news.c69f700d.jpg",
-    "src": "resources/images/cases/news.jpg"
+  "resources/fonts/Gilroy-SemiBold.woff2": {
+    "file": "assets/Gilroy-SemiBold.d8e57f7f.woff2",
+    "src": "resources/fonts/Gilroy-SemiBold.woff2"
   },
   "resources/images/admin-panel.png": {
     "file": "assets/admin-panel.8aa4ac2e.png",
     "src": "resources/images/admin-panel.png"
   },
+  "resources/images/cases/blog.jpg": {
+    "file": "assets/blog.a5720d97.jpg",
+    "src": "resources/images/cases/blog.jpg"
+  },
   "resources/images/avatar.jpg": {
     "file": "assets/avatar.0a53be38.jpg",
     "src": "resources/images/avatar.jpg"
   },
+  "resources/images/cases/cms.jpg": {
+    "file": "assets/cms.0e783a77.jpg",
+    "src": "resources/images/cases/cms.jpg"
+  },
+  "resources/images/cases/chatbot.jpg": {
+    "file": "assets/chatbot.917c1091.jpg",
+    "src": "resources/images/cases/chatbot.jpg"
+  },
   "resources/images/cases/crm.jpg": {
     "file": "assets/crm.841d6ea4.jpg",
     "src": "resources/images/cases/crm.jpg"
   },
-  "resources/images/cases/shop.jpg": {
-    "file": "assets/shop.e4e80aa0.jpg",
-    "src": "resources/images/cases/shop.jpg"
+  "resources/images/cases/news.jpg": {
+    "file": "assets/news.c69f700d.jpg",
+    "src": "resources/images/cases/news.jpg"
   },
   "resources/images/cases/your-project.svg": {
     "file": "assets/your-project.3be6bdf4.svg",
     "src": "resources/images/cases/your-project.svg"
   },
-  "resources/images/icons/play.svg": {
-    "file": "assets/play.3a9f99cd.svg",
-    "src": "resources/images/icons/play.svg"
+  "resources/images/cases/shop.jpg": {
+    "file": "assets/shop.e4e80aa0.jpg",
+    "src": "resources/images/cases/shop.jpg"
+  },
+  "resources/images/icons/telegram.svg": {
+    "file": "assets/telegram.6238de9b.svg",
+    "src": "resources/images/icons/telegram.svg"
   },
   "resources/images/icons/quote.svg": {
     "file": "assets/quote.2386e012.svg",
     "src": "resources/images/icons/quote.svg"
   },
+  "resources/images/icons/play.svg": {
+    "file": "assets/play.3a9f99cd.svg",
+    "src": "resources/images/icons/play.svg"
+  },
   "resources/images/icons/youtube.svg": {
     "file": "assets/youtube.d7f25e01.svg",
     "src": "resources/images/icons/youtube.svg"
   },
-  "resources/images/logo-moon.svg": {
-    "file": "assets/logo-moon.77c8adaf.svg",
-    "src": "resources/images/logo-moon.svg"
-  },
-  "resources/images/icons/telegram.svg": {
-    "file": "assets/telegram.6238de9b.svg",
-    "src": "resources/images/icons/telegram.svg"
-  },
   "resources/images/logo-text.svg": {
     "file": "assets/logo-text.be78c3d1.svg",
     "src": "resources/images/logo-text.svg"
   },
-  "resources/images/logo.svg": {
-    "file": "assets/logo.5d9863e5.svg",
-    "src": "resources/images/logo.svg"
-  },
   "resources/images/logo/alpinejs.svg": {
     "file": "assets/alpinejs.496916c8.svg",
     "src": "resources/images/logo/alpinejs.svg"
   },
+  "resources/images/logo.svg": {
+    "file": "assets/logo.5d9863e5.svg",
+    "src": "resources/images/logo.svg"
+  },
   "resources/images/logo/laravel.svg": {
     "file": "assets/laravel.03f6319e.svg",
     "src": "resources/images/logo/laravel.svg"
@@ -99,12 +95,16 @@
     "file": "assets/tailwindcss.8f489175.svg",
     "src": "resources/images/logo/tailwindcss.svg"
   },
+  "resources/images/logo-moon.svg": {
+    "file": "assets/logo-moon.77c8adaf.svg",
+    "src": "resources/images/logo-moon.svg"
+  },
   "resources/images/testimonial-thumb.jpg": {
     "file": "assets/testimonial-thumb.67326447.jpg",
     "src": "resources/images/testimonial-thumb.jpg"
   },
   "resources/js/app.js": {
-    "file": "assets/app.c4651ef5.js",
+    "file": "assets/app.f0294bb5.js",
     "src": "resources/js/app.js",
     "isEntry": true
   },
@@ -113,7 +113,8 @@
     "src": "node_modules/swiper/swiper.css"
   },
   "resources/css/app.css": {
-    "file": "assets/app.efe52697.css",
-    "src": "resources/css/app.css"
+    "file": "assets/app.c530671b.css",
+    "src": "resources/css/app.css",
+    "isEntry": true
   }
-}
+}
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -4,9 +4,6 @@ import { Navigation } from "swiper/modules"
 
 import("../../node_modules/swiper/swiper.css")
 
-/* Import main CSS */
-import("../css/app.css")
-
 /* Import Alpine.js */
 import Alpine from "alpinejs"
 import persist from "@alpinejs/persist"

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
@@ -14,9 +14,12 @@
     <meta name="msapplication-TileColor" content="#1A1B41" />
     <meta name="theme-color" content="#1A1B41" />
 
-    @vite('resources/js/app.js')
+    <style>
+        [x-cloak] { display: none !important; }
+    </style>
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
-<body x-data="{ openMobileMenu: false }">
+<body x-data="{ openMobileMenu: false }" x-cloak>
     <!-- Site header -->
     <header class="header pt-6 2xl:pt-10">
         <div class="container">
@@ -232,13 +235,13 @@ class="font-semibold text-white hover:text-pink"
                     </div>
                     <!-- /.how-it-works-items -->
                     <div class="how-it-works-preview">
-                        <video class="how-it-works-preview-video" :class="{ '_is-active': lvlTab_1_ActiveTab === 1 }" autoplay muted preload="auto" playsinline loop>
+                        <video load="lazy" class="how-it-works-preview-video" :class="{ '_is-active': lvlTab_1_ActiveTab === 1 }" autoplay muted preload="auto" playsinline loop>
                             <source src="/video/j1.mp4" type="video/mp4" />
                         </video>
-                        <video class="how-it-works-preview-video" :class="{ '_is-active': lvlTab_1_ActiveTab === 2 }" autoplay muted preload="auto" playsinline loop>
+                        <video load="lazy" class="how-it-works-preview-video" :class="{ '_is-active': lvlTab_1_ActiveTab === 2 }" autoplay muted preload="auto" playsinline loop>
                             <source src="/video/j2.mp4" type="video/mp4" />
                         </video>
-                        <video class="how-it-works-preview-video" :class="{ '_is-active': lvlTab_1_ActiveTab === 3 }" autoplay muted preload="auto" playsinline loop>
+                        <video load="lazy" class="how-it-works-preview-video" :class="{ '_is-active': lvlTab_1_ActiveTab === 3 }" autoplay muted preload="auto" playsinline loop>
                             <source src="/video/j3.mp4" type="video/mp4" />
                         </video>
                     </div>
@@ -267,10 +270,10 @@ class="font-semibold text-white hover:text-pink"
                     </div>
                     <!-- /.how-it-works-items -->
                     <div class="how-it-works-preview">
-                        <video class="how-it-works-preview-video" :class="{ '_is-active': lvlTab_2_ActiveTab === 1 }" autoplay muted preload="auto" playsinline loop>
+                        <video load="lazy" class="how-it-works-preview-video" :class="{ '_is-active': lvlTab_2_ActiveTab === 1 }" autoplay muted preload="auto" playsinline loop>
                             <source src="/video/p1.mp4" type="video/mp4" />
                         </video>
-                        <video class="how-it-works-preview-video" :class="{ '_is-active': lvlTab_2_ActiveTab === 2 }" autoplay muted preload="auto" playsinline loop>
+                        <video load="lazy" class="how-it-works-preview-video" :class="{ '_is-active': lvlTab_2_ActiveTab === 2 }" autoplay muted preload="auto" playsinline loop>
                             <source src="/video/p2.mp4" type="video/mp4" />
                         </video>
                     </div>

diff --git a/vite.config.js b/vite.config.js
@@ -4,7 +4,7 @@ import laravel from 'laravel-vite-plugin';
 export default defineConfig({
     plugins: [
         laravel({
-            input: ['resources/js/app.js'],
+            input: ['resources/css/app.css', 'resources/js/app.js'],
             refresh: true,
         }),
     ],