feat: add preview script and optimize Vite configuration

- Added a new "preview" script to package.json for easier local previewing of the application.
- Refactored Vite configuration by removing unnecessary library build options and external dependencies, streamlining the build process.
- Updated manual chunking logic to improve module handling and included additional dependencies in optimizeDeps for better performance.

frontend/crawlab-ui/package.json

@@ -51,7 +51,8 @@
     "build:local": "vite build --mode local",
     "build:lib": "vite build",
     "lint": "vite lint",
-    "test": "jest"
+    "test": "jest",
+    "preview": "vite preview"
   },
   "peerDependencies": {
     "@element-plus/icons-vue": "^2.3.1",

frontend/crawlab-ui/vite.config.ts

@@ -2,85 +2,28 @@ import { resolve } from 'path';
 import { defineConfig, UserConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import dynamicImport from 'vite-plugin-dynamic-import';
-import vueJsx from '@vitejs/plugin-vue-jsx';
-import svgLoader from 'vite-svg-loader';
 import { visualizer } from 'rollup-plugin-visualizer';
 
 export default defineConfig(({ mode }) => {
   const config: UserConfig = {
     build: {
-      lib: {
-        name: 'crawlab-ui',
-        entry: resolve(__dirname, 'src/index.ts'),
-        fileName: 'crawlab-ui',
-      },
       rollupOptions: {
-        // make sure to externalize deps that shouldn't be bundled
-        // into your library
-        external: [
-          'vue',
-          'vue-router',
-          'vue-i18n',
-          'vuex',
-          'axios',
-          'element-plus',
-          'element-plus/es/locale/lang/en',
-          'element-plus/es/locale/lang/zh-cn',
-          '@element/icons',
-          '@fortawesome/fontawesome-svg-core',
-          '@fortawesome/free-brands-svg-icons',
-          '@fortawesome/free-regular-svg-icons',
-          '@fortawesome/free-solid-svg-icons',
-          '@fortawesome/vue-fontawesome',
-          'atom-material-icons',
-          'monaco-editor',
-          'chart.js',
-          'cron-parser',
-          'pinyin',
-          'humanize-duration',
-          'dayjs',
-          'cronstrue/i18n',
-          'javascript-time-ago',
-          'javascript-time-ago/locale/en',
-          'javascript-time-ago/locale/zh',
-          'clipboard',
-        ],
         output: {
-          // Provide global variables to use in the UMD build
-          // for externalized deps
-          globals: {
-            vue: 'Vue',
-            'vue-router': 'VueRouter',
-            'vue-i18n': 'VueI18n',
-            vuex: 'Vuex',
-            axios: 'axios',
-            'element-plus': 'ElementPlus',
-            '@element/icons-vue': 'ElementIconsVue',
-            '@fortawesome/fontawesome-svg-core': 'FontAwesomeSvgCore',
-            '@fortawesome/free-brands-svg-icons': 'FontAwesomeBrandsSvgIcons',
-            '@fortawesome/free-regular-svg-icons': 'FontAwesomeRegularSvgIcons',
-            '@fortawesome/free-solid-svg-icons': 'FontAwesomeSolidSvgIcons',
-            '@fortawesome/vue-fontawesome': 'FontAwesomeVue',
-            'atom-material-icons': 'AtomMaterialIcons',
-            'monaco-editor': 'monaco-editor',
-            'chart.js': 'ChartJS',
-            'cron-parser': 'cronParser',
-            pinyin: 'pinyin',
-            'humanize-duration': 'humanizeDuration',
-            dayjs: 'dayjs',
-            'cronstrue/i18n': 'cronstrueI18n',
-            'javascript-time-ago': 'javascriptTimeAgo',
-            'javascript-time-ago/locale/en': 'javascriptTimeAgoLocaleEn',
-            'javascript-time-ago/locale/zh': 'javascriptTimeAgoLocaleZh',
-            'element-plus/es/locale/lang/en': 'elementPlusLocaleEn',
-            'element-plus/es/locale/lang/zh-cn': 'elementPlusLocaleZh',
-            clipboard: 'ClipboardJS',
+          manualChunks(id, meta) {
+            if (id.includes('node_modules')) {
+              const arr = id.toString().split('node_modules/');
+              const modulePath = arr[arr.length - 1];
+              return modulePath?.split('/')?.[0];
+            }
+            if (id.includes('three.min.js')) {
+              return 'three';
+            }
           },
         },
       },
     },
     optimizeDeps: {
-      include: ['element-plus', 'monaco-editor'],
+      include: ['element-plus', 'axios', 'monaco-editor'],
     },
     resolve: {
       dedupe: ['vue', 'vue-router', 'vuex', 'axios', 'element-plus'],
@@ -89,14 +32,8 @@ export default defineConfig(({ mode }) => {
       },
       extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
     },
-    plugins: [
-      vue(),
-      // @ts-ignore
-      dynamicImport(),
-      vueJsx(),
-      // @ts-ignore
-      svgLoader(),
-    ],
+    // @ts-ignore
+    plugins: [vue(), dynamicImport()],
     server: {
       cors: true,
     },
@@ -105,10 +42,6 @@ export default defineConfig(({ mode }) => {
   if (mode === 'analyze') {
     // @ts-ignore
     config.plugins.push(visualizer({ open: true, gzipSize: true }));
-  } else if (mode === 'development') {
-    config.build.watch = {
-      include: ['src/**', 'public', 'index.html'],
-    };
   }
 
   return config;