服务器配置太低 分析包排除包

package.json

@@ -18,6 +18,8 @@
     "dotenv": "^16.4.5",
     "element-plus": "^2.3.12",
     "lucid-cardano": "^0.10.7",
+    "rollup-plugin-external-globals": "^0.9.2",
+    "rollup-plugin-visualizer": "^5.12.0",
     "vite": "latest",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5",

vite.config.ts

@@ -16,10 +16,15 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
+import * as dotenv from 'dotenv'
 
-const pathSrc = path.resolve(__dirname, 'src')
+// 打包体积分析 npm i rollup-plugin-visualizer -D
+import { visualizer } from 'rollup-plugin-visualizer'
 
-import * as dotenv from 'dotenv'
+// 打包 CDN 引入 external 排除
+import externalGlobals from 'rollup-plugin-external-globals'
+
+const pathSrc = path.resolve(__dirname, 'src')
 
 dotenv.config()
 
@@ -75,7 +80,60 @@ export default defineConfig({
       target: 'esnext',
     },
   },
+
   build: {
+    assetsDir: 'assets',
+    chunkSizeWarningLimit: 1000,
+    // 配置打包文件路径和命名
+    minify: 'terser',
+    outDir: 'tool-plus',
+    // 取消计算文件大小，加快打包速度
+    reportCompressedSize: false,
+    sourcemap: false,
     target: 'esnext',
+    terserOptions: {
+      compress: {
+        // 生产环境时移除console.log调试代码
+        drop_console: true,
+        drop_debugger: true,
+      },
+    },
+    rollupOptions: {
+      // // 打包时忽略某些包，避免打包时间过长
+      external: [
+        'vue',
+        'vue-router',
+        'pinia',
+        'vue-demi',
+        'ant-design-vue',
+        'antd',
+        'icons-vue',
+        'icons-svg',
+        'colors',
+        'dayjs',
+        'prismjs',
+        'sql-formatter',
+        // 以下3个包是在使用ant-design-vue的时候始终排除不掉的，感觉ChatGPT协助我解决了这个问题，原来可以使用正则表达式排除
+        /^@ant-design\/icons-vue/,
+        /^@ant-design\/icons-svg/,
+        /^@ant-design\/colors/,
+      ],
+      plugins: [
+        // // 打包时忽略某些包，避免打包时间过长
+        externalGlobals({
+          vue: 'Vue',
+          'vue-router': 'VueRouter',
+          pinia: 'Pinia',
+          'vue-demi': 'VueDemi',
+          'ant-design-vue': 'antd',
+          dayjs: 'dayjs',
+          prismjs: 'Prism',
+          axios: 'axios',
+          // qrcode: 'QRCode',
+          clipboard: 'ClipboardJS',
+          'sql-formatter': 'sqlFormatter',
+        }) as any,
+      ],
+    },
   },
 })