Code splitting / Dynamic imports

app/Providers/AppServiceProvider.php

@@ -4,6 +4,7 @@
 
 use App\Models\User;
 use Illuminate\Http\Resources\Json\JsonResource;
+use Illuminate\Support\Facades\Vite;
 use Illuminate\Support\ServiceProvider;
 use Laravel\Pulse\Facades\Pulse;
 
@@ -13,6 +14,8 @@ public function boot(): void
     {
         JsonResource::withoutWrapping();
 
+        Vite::prefetch(concurrency: 3);
+
         // @codeCoverageIgnoreStart
         Pulse::users(function ($ids) {
             return User::findMany($ids)->map(fn ($user) => [

package.json

@@ -8,6 +8,7 @@
   "devDependencies": {
     "@heroicons/vue": "^2.1.5",
     "@inertiajs/vue3": "^1.2.0",
+    "@sentry/vue": "^8.30.0",
     "@tailwindcss/forms": "^0.5.9",
     "@vitejs/plugin-vue": "^5.1.4",
     "autoprefixer": "^10.4.20",
@@ -16,8 +17,6 @@
     "sass": "^1.79.1",
     "tailwindcss": "^3.4.12",
     "vite": "^5.4.6",
-    "vite-svg-loader": "^5.1.0",
-    "vue": "^3.5.6",
-    "@sentry/vue": "^8.30.0"
+    "vue": "^3.5.6"
   }
 }

resources/js/Layouts/App.vue

@@ -20,12 +20,11 @@
 </template>
 
 <script setup>
-    import { computed } from "vue";
+    import { computed, defineAsyncComponent } from "vue";
     import { usePage } from '@inertiajs/vue3'
 
-    import Header from "@js/Components/Header.vue";
-    import Footer from "@js/Components/Footer.vue";
-    import Notice from "@js/Components/Notice.vue";
+    const Header = defineAsyncComponent(() => import("@js/Components/Header.vue"));
+    const Footer = defineAsyncComponent(() => import("@js/Components/Footer.vue"));
 
     const page = usePage();
 

resources/js/Pages/EmailVerification/Show.vue

@@ -25,8 +25,6 @@
     import { ref } from "vue";
     import { router } from "@inertiajs/vue3";
 
-    import PageTitle from "@js/Components/PageTitle.vue";
-
     const title = ref("Verify Your Email");
 
     const resend = () => {

resources/js/Pages/Login/Show.vue

@@ -93,8 +93,6 @@
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
 
-    import PageTitle from "@js/Components/PageTitle.vue";
-
     const props = defineProps({
         email: String,
         password: String,

resources/js/Pages/Register/Show.vue

@@ -100,8 +100,6 @@
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
 
-    import PageTitle from "@js/Components/PageTitle.vue";
-
     const props = defineProps({
         first_name: String,
         last_name: String,

resources/js/Pages/ResetPassword/Edit.vue

@@ -58,8 +58,6 @@
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
 
-    import PageTitle from "@js/Components/PageTitle.vue";
-
     const props = defineProps({
         email: String,
         token: String,

resources/js/Pages/ResetPassword/Show.vue

@@ -52,8 +52,6 @@
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
 
-    import PageTitle from "@js/Components/PageTitle.vue";
-
     const title = ref("Forgot Password");
     const forgotPasswordForm = useForm({
         email: "",

resources/js/app.js

@@ -2,11 +2,9 @@ import * as Sentry from "@sentry/vue";
 
 import { route, ZiggyVue } from 'ziggy-js';
 
-import { createApp, h } from 'vue';
+import { createApp, defineAsyncComponent, h } from 'vue';
 import { createInertiaApp, Link, Head } from '@inertiajs/vue3';
 
-import { userCan } from "@js/utilities/permissions.js";
-
 import {
     Bars3Icon,
     XMarkIcon,
@@ -16,9 +14,9 @@ import {
     ExclamationCircleIcon,
 } from '@heroicons/vue/24/outline';
 
-import AppLayout from "@js/Layouts/App.vue";
+import { userCan } from "@js/utilities/permissions.js";
 
-import Notice from "@js/Components/Notice.vue";
+const AppLayout = defineAsyncComponent(() => import('@js/Layouts/App.vue'));
 
 createInertiaApp({
     resolve: name => {
@@ -53,7 +51,8 @@ createInertiaApp({
 
         VueApp.component('Head', Head)
             .component('Link', Link)
-            .component('Notice', Notice);
+            .component('PageTitle', defineAsyncComponent(() => import('@js/Components/PageTitle.vue')))
+            .component('Notice', defineAsyncComponent(() => import('@js/Components/Notice.vue')));
 
         VueApp.mount(el);
     },

vite.config.js

@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
-import svgLoader from 'vite-svg-loader';
 
 export default defineConfig({
     plugins: [
@@ -21,35 +20,37 @@ export default defineConfig({
                 },
             },
         }),
-
-        svgLoader({
-            svgoConfig: {
-                multipass: true,
-            },
-        }),
     ],
 
     resolve: {
         alias: {
-            // 'ziggy': '/vendor/tightenco/ziggy/src/js',
-            // 'ziggy-vue': '/vendor/tightenco/ziggy/src/js/vue',
             'ziggy-js': '/vendor/tightenco/ziggy',
             '@': '/resources',
             '@fonts': '/public/fonts',
             '@img': '/public/img',
             '@js': '/resources/js',
+            '@scss': '/resources/scss',
+        },
+    },
+
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: 'modern',
+            },
         },
     },
 
     build: {
+        sourcemap: false,
         rollupOptions: {
             output: {
-                manualChunks(id) {
+                manualChunks: (id) => {
                     if (id.includes('node_modules')) {
                         return 'vendor';
                     }
 
-                    if (id.includes('resources')) {
+                    if (id.includes('resources/js')) {
                         return 'app';
                     }
                 },