refactor: 优化首屏打包体积

- jschardet 仅在导入非 utf-8 时引入
- 各个组件面板改为按需加载

Author: FreecellRaid

src/components/common/HelpDocument.vue

@@ -34,10 +34,7 @@
                         <h3>{{ section.title }}</h3>
                     </div>
                     <ul v-if="section.type === 'tips'" class="tip-list">
-                        <li
-                            v-for="item in section.items"
-                            :key="item.term"
-                        >
+                        <li v-for="item in section.items" :key="item.term">
                             <strong>{{ item.term }}</strong>
                             - {{ item.description }}
                         </li>

src/components/layout/SidebarLeft.vue

@@ -150,17 +150,28 @@ import {
     TextInitial,
     UserRound,
 } from '@lucide/vue';
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { defineAsyncComponent, ref, onMounted, onUnmounted, watch } from 'vue';
 import { useStyleStore } from '@/stores/styleStore';
 import { usePanelResize } from '@/composables/usePanelResize';
 import { useUiStore } from '@/stores/uiStore';
 import { useWindowStore } from '@/stores/windowStore';
 import ChunkListPanel from '@/components/panels/ChunkListPanel.vue';
-import IdentityPanel from '@/components/panels/IdentityPanel.vue';
-import RuleEditorPanel from '@/components/panels/RuleEditorPanel.vue';
-import ExportFormatPanel from '@/components/panels/ExportFormatPanel.vue';
-import SearchPanel from '@/components/panels/SearchPanel.vue';
-import SettingsPopover from '@/components/popovers/SettingsPopover.vue';
+
+const IdentityPanel = defineAsyncComponent(
+    () => import('@/components/panels/IdentityPanel.vue'),
+);
+const RuleEditorPanel = defineAsyncComponent(
+    () => import('@/components/panels/RuleEditorPanel.vue'),
+);
+const ExportFormatPanel = defineAsyncComponent(
+    () => import('@/components/panels/ExportFormatPanel.vue'),
+);
+const SearchPanel = defineAsyncComponent(
+    () => import('@/components/panels/SearchPanel.vue'),
+);
+const SettingsPopover = defineAsyncComponent(
+    () => import('@/components/popovers/SettingsPopover.vue'),
+);
 
 const uiStore = useUiStore();
 const windowStore = useWindowStore();

src/components/workspace/MainWorkspace.vue

@@ -39,14 +39,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
 import { useWindowStore } from '@/stores/windowStore';
 import type { WindowInstance, WindowName } from '@/types/window';
 import FileImporter from '@/components/common/FileImporter.vue';
-import ChunkView from './ChunkView.vue';
-import ExportPreview from './ExportPreview.vue';
 import DefaultView from './DefaultView.vue';
 
+const ChunkView = defineAsyncComponent(() => import('./ChunkView.vue'));
+const ExportPreview = defineAsyncComponent(() => import('./ExportPreview.vue'));
+
 const windowStore = useWindowStore();
 const workspacePanes = computed(() => windowStore.workspacePanes);
 

src/io/import/textDecoder.ts

@@ -1,5 +1,3 @@
-import { detect } from 'jschardet';
-
 export interface DecodedText {
     text: string;
     encoding: string;
@@ -78,7 +76,7 @@ function toBinaryString(bytes: Uint8Array): string {
     return chunks.join('');
 }
 
-export function decodeText(bytes: Uint8Array): DecodedText {
+export async function decodeText(bytes: Uint8Array): Promise<DecodedText> {
     // UTF-8 可被浏览器直接检测，优先用这个
     if (isValidUtf8(bytes)) {
         return {
@@ -97,6 +95,8 @@ export function decodeText(bytes: Uint8Array): DecodedText {
         };
     }
 
+    // 绝大多数文件都是 UTF-8，遇到检测不了的再导入，优化首屏加载
+    const { detect } = await import('jschardet');
     const detected = detect(toBinaryString(bytes));
     const detectedName = detected.encoding || '';
     const decoderLabel = ENCODING_LABELS[normalizeEncodingName(detectedName)];
@@ -120,5 +120,5 @@ export function decodeText(bytes: Uint8Array): DecodedText {
 }
 
 export async function readFileAsText(file: File): Promise<DecodedText> {
-    return decodeText(new Uint8Array(await file.arrayBuffer()));
+    return await decodeText(new Uint8Array(await file.arrayBuffer()));
 }

src/views/Editor.vue

@@ -24,14 +24,20 @@
 </template>
 
 <script setup lang="ts">
+import { defineAsyncComponent } from 'vue';
 import { useWindowStore } from '@/stores/windowStore';
 import { useKeyboardShortcuts } from '@/composables/useKeyboardShortcuts';
-import HelpDocument from '@/components/common/HelpDocument.vue';
 import TopMenuBar from '@/components/layout/TopMenuBar.vue';
 import SidebarLeft from '@/components/layout/SidebarLeft.vue';
 import MainWorkspace from '@/components/workspace/MainWorkspace.vue';
 import StatusBar from '@/components/layout/StatusBar.vue';
-import SidebarRight from '@/components/layout/SidebarRight.vue';
+
+const HelpDocument = defineAsyncComponent(
+    () => import('@/components/common/HelpDocument.vue'),
+);
+const SidebarRight = defineAsyncComponent(
+    () => import('@/components/layout/SidebarRight.vue'),
+);
 
 const windowStore = useWindowStore();
 useKeyboardShortcuts();