异步组件 优化首屏加载速度

src/api/music.ts

@@ -1,7 +1,6 @@
 import { IPlayMusicUrl } from "@/type/music";
 import { ILyric } from "@/type/lyric";
 import request from "@/utils/request";
-
 // 根据音乐Id获取音乐播放URl
 export const getMusicUrl = (id: number) => {
   return request.get<IPlayMusicUrl>("/song/url", { params: { id: id } });

src/layout/AppLayout.vue

@@ -30,7 +30,13 @@
 import type { SongResult } from '@/type/music';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
-import { AppMenu, PlayBar, SearchBar } from './components';
+// import { AppMenu, PlayBar, SearchBar } from './components';
+import {defineAsyncComponent} from 'vue';
+const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
+const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
+const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
+
+
 
 const store = useStore();
 

src/views/home/index.vue

@@ -14,10 +14,15 @@
 </template>
 
 <script lang="ts" setup>
-import RecommendSinger from "@/components/RecommendSinger.vue";
+import {defineAsyncComponent} from 'vue';
-import PlaylistType from "@/components/PlaylistType.vue";
+// import RecommendSinger from "@/components/RecommendSinger.vue";
-import RecommendSonglist from "@/components/RecommendSonglist.vue";
+// import PlaylistType from "@/components/PlaylistType.vue";
-import RecommendAlbum from "@/components/RecommendAlbum.vue";
+// import RecommendSonglist from "@/components/RecommendSonglist.vue";
+// import RecommendAlbum from "@/components/RecommendAlbum.vue";
+const RecommendSinger = defineAsyncComponent(() => import("@/components/RecommendSinger.vue"));
+const PlaylistType = defineAsyncComponent(() => import("@/components/PlaylistType.vue"));
+const RecommendSonglist = defineAsyncComponent(() => import("@/components/RecommendSonglist.vue"));
+const RecommendAlbum = defineAsyncComponent(() => import("@/components/RecommendAlbum.vue"));
 
 </script>