perf: 文件管理、分析页、代码生成等部分组件调整为异步加载

src/views/system/file/main/FileMain/FileGrid.vue

@@ -40,16 +40,9 @@
 </template>
 
 <script setup lang="ts">
-import FileImage from './FileImage.vue'
 import FileRightMenu from './FileRightMenu.vue'
 import type { FileItem } from '@/apis/system'
 
-interface Props {
-  data?: FileItem[]
-  selectedFileIds?: string[]
-  isBatchMode?: boolean
-}
-
 const props = withDefaults(defineProps<Props>(), {
   data: () => [], // 文件数据
   selectedFileIds: () => [], // 批量模式下选中的文件id数组
@@ -62,6 +55,14 @@ const emit = defineEmits<{
   (e: 'right-menu-click', mode: string, item: FileItem): void
 }>()
 
+const FileImage = defineAsyncComponent(() => import('./FileImage.vue'))
+
+interface Props {
+  data?: FileItem[]
+  selectedFileIds?: string[]
+  isBatchMode?: boolean
+}
+
 // 文件名称带后缀
 const getFileName = (item: FileItem) => {
   return `${item.name}${item.extension ? `.${item.extension}` : ''}`

src/views/system/file/main/FileMain/FileList.vue

@@ -65,17 +65,10 @@
 
 <script setup lang="ts">
 import type { TableInstance, TableRowSelection } from '@arco-design/web-vue'
-import FileImage from './FileImage.vue'
 import FileRightMenu from './FileRightMenu.vue'
 import type { FileItem } from '@/apis/system'
 import { formatFileSize } from '@/utils'
 
-interface Props {
-  data?: FileItem[]
-  selectedFileIds?: string[]
-  isBatchMode?: boolean
-}
-
 const props = withDefaults(defineProps<Props>(), {
   data: () => [], // 文件数据
   selectedFileIds: () => [],
@@ -88,6 +81,14 @@ const emit = defineEmits<{
   (e: 'right-menu-click', mode: string, item: FileItem): void
 }>()
 
+const FileImage = defineAsyncComponent(() => import('./FileImage.vue'))
+
+interface Props {
+  data?: FileItem[]
+  selectedFileIds?: string[]
+  isBatchMode?: boolean
+}
+
 // 文件名称带后缀
 const getFileName = (item: FileItem) => {
   return `${item.name}${item.extension ? `.${item.extension}` : ''}`

src/views/system/file/main/FileMain/index.vue

@@ -99,9 +99,11 @@ import { type FileItem, type FileQuery, deleteFile, listFile, uploadFile } from
 import { ImageTypes, OfficeTypes } from '@/constant/file'
 import 'viewerjs/dist/viewer.css'
 import { downloadByUrl } from '@/utils/downloadFile'
-import FilePreview from '@/components/FilePreview/index.vue'
+
 import type { ExcelConfig } from '@/components/FilePreview/type'
 
+const FilePreview = defineAsyncComponent(() => import('@/components/FilePreview/index.vue'))
+
 const FileList = defineAsyncComponent(() => import('./FileList.vue'))
 const route = useRoute()
 const { mode, selectedFileIds, toggleMode, addSelectedFileItem } = useFileManage()