Vue 3での同期と非同期コンポーネントの組み合わせによる効率的なロード

import MyComponent from './components/MyComponent.vue';

import { defineAsyncComponent } from 'vue';

const MyAsyncComponent = defineAsyncComponent(() => import('./components/MyComponent.vue'));

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
);

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: LoadingComponent,
  delay: 200
});

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  errorComponent: ErrorComponent,
  timeout: 3000
});

import Header from './components/Header.vue'; // 同期コンポーネント
const Sidebar = defineAsyncComponent(() => import('./components/Sidebar.vue')); // 非同期コンポーネント

const Dashboard = defineAsyncComponent(() => import(/* webpackChunkName: "dashboard" */ './components/Dashboard.vue'));

const routes = [
  { path: '/dashboard', component: () => import('./components/Dashboard.vue') }
];

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>

onMounted(() => {
  console.time('AsyncComponent');
  import('./components/AsyncComponent.vue').then(() => {
    console.timeEnd('AsyncComponent');
  });
});

import Header from './components/Header.vue';
const AsyncProfile = defineAsyncComponent(() => import('./components/Profile.vue'));