perf: dont use eager imports for loading pages

adonisjs-community · Mar 2, 2024 · a32f139 · a32f139
1 parent 9ad1fea
commit a32f139
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/resources/app.ts b/resources/app.ts
@@ -7,13 +7,18 @@ import { vTooltip } from 'floating-vue'
 import { createInertiaApp } from '@inertiajs/vue3'
 import { createApp, h, ref, type DefineComponent } from 'vue'
 import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+import { resolvePageComponent } from '@adonisjs/inertia/helpers'
+
+console.log('app.ts')
 
 void createInertiaApp({
   progress: { color: '#5468FF' },
 
   resolve: (name) => {
-    const pages = import.meta.glob<DefineComponent>('./pages/**/*.vue', { eager: true })
-    return pages[`./pages/${name}.vue`] as any
+    return resolvePageComponent(
+      `./pages/${name}.vue`,
+      import.meta.glob<DefineComponent>('./pages/**/*.vue'),
+    )
   },
 
   setup({ el, App, props, plugin }) {

diff --git a/resources/ssr.ts b/resources/ssr.ts
@@ -1,21 +1,25 @@
-import { VTooltip } from 'floating-vue'
+import { vTooltip } from 'floating-vue'
 import { createInertiaApp } from '@inertiajs/vue3'
 import { renderToString } from '@vue/server-renderer'
 import { createSSRApp, h, type DefineComponent, ref } from 'vue'
+import { resolvePageComponent } from '@adonisjs/inertia/helpers'
 
 export default function render(page) {
   return createInertiaApp({
     page,
     render: renderToString,
     resolve: (name) => {
-      const pages = import.meta.glob<DefineComponent>('./pages/**/*.vue', { eager: true })
-      return pages[`./pages/${name}.vue`]
+      return resolvePageComponent(
+        `./pages/${name}.vue`,
+        import.meta.glob<DefineComponent>('./pages/**/*.vue'),
+      )
     },
 
     setup({ App, props, plugin }) {
       const app = createSSRApp({ render: () => h(App, props) })
         .use(plugin)
-        .directive('tooltip', VTooltip)
+        .directive('tooltip', vTooltip)
+        .directive('autoAnimate', {})
 
       app.config.globalProperties.modelViewerScriptLoaded = ref(false)
 

diff --git a/resources/views/app_root.edge b/resources/views/app_root.edge
@@ -25,7 +25,7 @@
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#ffffff">
 
-  @vite(['resources/app.ts'])
+  @vite(['resources/app.ts', `resources/pages/${page.component}.vue`])
 </head>
 
 <body>