diff --git a/src/router/index.ts b/src/router/index.ts
index c277011..a325937 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,3 @@
-import IndexLayout from "@/layout/IndexLayout.vue";
-import ArticleDetail from "@/views/ArticleDetail.vue";
-import ArticleIndex from "@/views/ArticleIndex.vue";
 import { createRouter, createWebHistory } from "vue-router";
 
 export default createRouter({
@@ -9,22 +6,22 @@ export default createRouter({
 		{
 			path: "/",
 			name: "Index",
-			component: IndexLayout,
+			component: () => import("@/layout/IndexLayout.vue"),
 			children: [
 				{
 					path: "/",
 					name: "ArticleIndex",
-					component: ArticleIndex
+					component: () => import("@/views/ArticleIndex.vue")
 				},
 				{
 					path: "/aid:id.html",
 					name: "ArticleDetail",
-					component: ArticleDetail
+					component: () => import("@/views/ArticleDetail.vue")
 				},
 				{
 					path: "/about",
 					name: "About",
-					component: ArticleDetail
+					component: () => import("@/views/ArticleDetail.vue")
 				}
 			]
 		}
diff --git a/src/views/ArticleDetail.vue b/src/views/ArticleDetail.vue
index cf399a8..31bc7ae 100644
--- a/src/views/ArticleDetail.vue
+++ b/src/views/ArticleDetail.vue
@@ -38,10 +38,6 @@
 
 <script lang="ts" setup>
 import { ArticleAPI, ArticleView, Icon } from "timi-web";
-import ArticleAbout from "@/components/article/template/ArticleAbout.vue";
-import ArticleMusic from "@/components/article/template/ArticleMusic.vue";
-import ArticlePublic from "@/components/article/template/ArticlePublic.vue";
-import ArticleSoftware from "@/components/article/template/ArticleSoftware.vue";
 import { type Component } from "vue";
 
 const route = useRoute();
@@ -49,19 +45,20 @@ const router = useRouter();
 
 const article = ref<ArticleView<any>>();
 const template = ref<Component | null>(null);
-const templates: Record<string, Component> = {
-	ABOUT: ArticleAbout,
-	MUSIC: ArticleMusic,
-	PUBLIC: ArticlePublic,
-	SOFTWARE: ArticleSoftware
+const templates: Record<string, () => Promise<Component>> = {
+	ABOUT: () => import("@/components/article/template/ArticleAbout.vue"),
+	MUSIC: () => import("@/components/article/template/ArticleMusic.vue"),
+	PUBLIC: () => import("@/components/article/template/ArticlePublic.vue"),
+	SOFTWARE: () => import("@/components/article/template/ArticleSoftware.vue")
 };
 const isAboutRoute = computed(() => route.name === "About");
 
 watch(article, () => {
-	if (article.value) {
-		const key = isAboutRoute.value ? "ABOUT" : article.value.type;
-		template.value = markRaw(templates[key]);
+	if (!article.value) {
+		return;
 	}
+	const loader = templates[isAboutRoute.value ? "ABOUT" : article.value.type];
+	template.value = defineAsyncComponent(loader);
 });
 
 onMounted(async () => {