chore: 优化渲染器应用的代码切割,加快加载速度

apps/renderer/.env.analyze

@@ -0,0 +1,11 @@
+# 只在生产模式中被载入
+VITE_NODE_ENV = 'analyze'
+
+# 公共基础路径, 详见: https://cn.vitejs.dev/guide/build.html#public-base-path
+VITE_BASE_URL = /
+
+VITE_BASE_API_URL = 'https://custom-chart-api.shiyuegame.com/'
+
+VITE_PLATFORM_URL = 'https://y-code.shiyue.com/'
+VITE_DESIGNER_URL = 'https://y-code-designer.shiyue.com/'
+VITE_RENDERER_URL = 'https://y-code-renderer.shiyue.com/'

apps/renderer/package.json

@@ -9,13 +9,12 @@
     "build": "vite build --mode production",
     "build:staging": "vite build --mode staging",
     "build:dev": "vite build --mode development",
+    "build:analyze": "vite build --mode analyze",
     "preview": "vite preview",
     "typecheck": "vue-tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
-    "@iframe-resizer/child": "^5.3.3",
     "@sentry/vue": "^9.7.0",
-    "@sy/web-vitals": "workspace:*",
     "@tanstack/vue-query": "^5.69.0",
     "@vtj/charts": "^0.11.5",
     "@vtj/core": "^0.11.5",
@@ -38,6 +37,7 @@
     "@types/postmate": "catalog:",
     "@vitejs/plugin-vue": "catalog:",
     "@vtj/cli": "^0.11.2",
+    "rollup-plugin-visualizer": "5.14.0",
     "vite": "catalog:",
     "vite-plugin-mkcert": "catalog:"
   }

apps/renderer/vite.config.ts

@@ -1,12 +1,14 @@
 import path from 'node:path';
 
 import vue from '@vitejs/plugin-vue';
+import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig, loadEnv } from 'vite';
 import mkcert from 'vite-plugin-mkcert';
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), ['VITE_']);
   const isDev = env.VITE_NODE_ENV === 'development';
+  const isAnalyze = env.VITE_NODE_ENV === 'analyze';
 
   return {
     // 服务器配置
@@ -18,7 +20,19 @@ export default defineConfig(({ mode }) => {
       : undefined,
 
     // 插件配置
-    plugins: [vue(), isDev && mkcert()],
+    plugins: [
+      vue(),
+      isDev && mkcert(),
+      // 添加打包分析插件
+      isAnalyze &&
+        visualizer({
+          filename: 'stats.html', // 分析图生成的文件名
+          open: true, // 打包完成后自动打开浏览器
+          gzipSize: true, // 显示gzip后的大小
+          brotliSize: true, // 显示brotli压缩后的大小
+          stat: true, // 显示包的状态信息
+        }),
+    ].filter(Boolean),
 
     // 解析配置
     resolve: {
@@ -32,5 +46,33 @@ export default defineConfig(({ mode }) => {
     define: {
       'process.env': JSON.stringify(env),
     },
+
+    // 打包配置
+    build: {
+      rollupOptions: {
+        output: {
+          // 可选：对代码进行分块
+          manualChunks: {
+            vendor: ['vue', 'vue-router', 'core-js'],
+            'element-plus': ['element-plus'],
+            icon: ['@vtj/icons'],
+            chart: ['@vtj/charts'],
+            utils: ['@vtj/utils'],
+            fetch: ['axios', '@tanstack/vue-query'],
+            sentry: ['@sentry/vue'],
+            // 低代码引擎的内容打包到一块
+            'low-code-engine': [
+              '@vtj/core',
+              // 物料手动拆分会报错,绕过它
+              // '@vtj/materials',
+              '@vtj/pro',
+              '@vtj/renderer',
+              '@vtj/ui',
+              '@vtj/web',
+            ],
+          },
+        },
+      },
+    },
   };
 });

packages/renderer-adapter/wujie-vue2/package.json

@@ -28,7 +28,6 @@
     "vue": "2.7.16"
   },
   "dependencies": {
-    "licia-es": "catalog:",
     "vue-property-decorator": "9.1.2",
     "wujie-vue2": "1.0.22"
   },