Code splitting / Dynamic imports (#83)

* Update vite.config.js

* Update vite.config.js

* Remove `vite-svg-loader`

* Update vite.config.js

* Use dynamic imports

* Update Composer dependencies

* Use Vite prefetch

* Update NPM dependencies

* Use modern Sass API to prevent warnings on build

* Update app.js

* Update app.js

Author: SebKay

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) => [

bun.lockb

@@ -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"
   }
 }

composer.lock

@@ -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();
 

package.json

@@ -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/Layouts/App.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/EmailVerification/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/Login/Show.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/Register/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: "",