perf: Pack on demand

vite.config.ts

@@ -1,36 +1,38 @@
-
-import { resolve } from 'path'
-import { UserConfigExport, ConfigEnv } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-import { loadEnv } from './build/utils'
-import { createProxy } from './build/proxy'
-import { viteMockServe } from 'vite-plugin-mock'
+import { resolve } from "path";
+import { UserConfigExport, ConfigEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import { loadEnv } from "./build/utils";
+import { createProxy } from "./build/proxy";
+import { viteMockServe } from "vite-plugin-mock";
+import styleImport from "vite-plugin-style-import";
 
 const pathResolve = (dir: string): any => {
-  return resolve(__dirname, '.', dir)
-}
+  return resolve(__dirname, ".", dir);
+};
 
-const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_OPEN } = loadEnv()
+const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_OPEN } = loadEnv();
 
 const alias: Record<string, string> = {
-  '/@': pathResolve('src'),
-  'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' //解决警告You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
-}
+  "/@": pathResolve("src"),
+  "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js", //解决警告You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
+};
 
-const root: string = process.cwd()
+const root: string = process.cwd();
 
 export default ({ command }: ConfigEnv): UserConfigExport => {
-  let prodMock = true
+  let prodMock = true;
   return {
     /**
      * 基本公共路径
+     * /manages/ 可根据项目部署域名的后缀自行填写（全局搜/manages/替换）
      * @default '/'
      */
-    base: process.env.NODE_ENV === "production" ? "/manages/" : VITE_PUBLIC_PATH,
+    base:
+      process.env.NODE_ENV === "production" ? "/manages/" : VITE_PUBLIC_PATH,
     root,
     resolve: {
-      alias
+      alias,
     },
     // 服务端渲染
     server: {
@@ -42,15 +44,38 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
        */
       port: VITE_PORT,
       // 本地跨域代理
-      proxy: createProxy(VITE_PROXY)
+      proxy: createProxy(VITE_PROXY),
     },
     plugins: [
       vue(),
       vueJsx(),
+      styleImport({
+        libs: [
+          // 按需加载element-plus
+          {
+            libraryName: "element-plus",
+            esModule: true,
+            ensureStyleFile: true,
+            resolveStyle: (name) => {
+              return `element-plus/lib/theme-chalk/${name}.css`;
+            },
+            resolveComponent: (name) => {
+              return `element-plus/lib/${name}`;
+            },
+          },
+          // 按需加载vxe-table
+          {
+            libraryName: "vxe-table",
+            esModule: true,
+            resolveComponent: (name) => `vxe-table/es/${name}`,
+            resolveStyle: (name) => `vxe-table/es/${name}/style.css`,
+          },
+        ],
+      }),
       viteMockServe({
-        mockPath: 'mock',
-        localEnabled: command === 'serve',
-        prodEnabled: command !== 'serve' && prodMock,
+        mockPath: "mock",
+        localEnabled: command === "serve",
+        prodEnabled: command !== "serve" && prodMock,
         injectCode: `
           import { setupProdMockServer } from './mockProdServer';
           setupProdMockServer();
@@ -58,13 +83,19 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
         logger: true,
       }),
     ],
+    optimizeDeps: {
+      include: [
+        "element-plus/lib/locale/lang/zh-cn",
+        "element-plus/lib/locale/lang/en",
+      ],
+    },
     build: {
       brotliSize: false,
       // 消除打包大小超过500kb警告
-      chunkSizeWarningLimit: 2000
+      chunkSizeWarningLimit: 2000,
     },
     define: {
-      __INTLIFY_PROD_DEVTOOLS__: false
-    }
-  }
-}
+      __INTLIFY_PROD_DEVTOOLS__: false,
+    },
+  };
+};