perf: optimize the size of the first screen

CHANGELOG.zh_CN.md

@@ -1,3 +1,14 @@
+# Wip
+
+### ⚡ Performance Improvements
+
+- 优化首屏体积大小
+
+### 🐛 Bug Fixes
+
+- 修复一级菜单折叠显示菜单名问题
+- 修复预览命令不打包问题
+
 # 2.0.0-rc.3 (2020-10-19)
 
 ### ✨ Features

src/components/Table/src/hooks/useProps.ts

@@ -1,12 +1,3 @@
-/*
- * @description:
- * @author: wenbin.chen
- * @Date: 2020-05-12 13:20:26
- * @LastEditors: vben
- * @LastEditTime: 2020-10-07 14:52:34
- * @email: 190848757@qq.com
- */
-
 import { Ref, ref, watch, unref } from 'vue';
 import { BasicTableProps } from '../types/table';
 

src/components/Table/src/props.ts

@@ -133,7 +133,7 @@ export const basicProps = {
   },
   bordered: {
     type: Boolean as PropType<boolean>,
-    default: true,
+    default: false,
   },
   pagination: {
     type: [Object, Boolean] as PropType<PaginationProps | boolean>,

src/components/registerGlobComp.ts

@@ -1,11 +1,12 @@
 import Icon from './Icon/index';
 import { BasicHelp, BasicTitle } from './Basic';
 import Button from './Button/index.vue';
-import { App } from 'vue';
+import { Button as AntButton } from 'ant-design-vue';
+import { getApp } from '/@/useApp';
 
-const compList = [Icon, BasicHelp, BasicTitle, Button];
+const compList = [Icon, BasicHelp, BasicTitle, Button, AntButton.Group];
-export function registerGlobComp(app: App<Element>) {
+export function registerGlobComp() {
   compList.forEach((comp: any) => {
-    app.component(comp.name, comp);
+    getApp().component(comp.name, comp);
   });
 }

src/layouts/default/index.tsx

@@ -13,12 +13,17 @@ import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
 import { useFullContent } from '/@/hooks/web/useFullContent';
 
 import LockPage from '/@/views/sys/lock/index.vue';
+import { registerGlobComp } from '/@/components/registerGlobComp';
 
 import './index.less';
-// import { userStore } from '/@/store/modules/user';
 export default defineComponent({
   name: 'DefaultLayout',
   setup() {
+    // ! 在这里才注册全局组件
+    // ! 可以减少首屏代码体积
+    // default layout是在登录后才加载的。所以不会打包到首屏去
+    registerGlobComp();
+
     // 获取项目配置
     const { getFullContent } = useFullContent();
 

src/layouts/default/setting/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div @click="openDrawer" class="setting-button">
-    <SettingOutlined :spin="true" />
+    <SettingOutlined />
     <SettingDrawer @register="register" />
   </div>
 </template>

src/main.ts

@@ -6,9 +6,9 @@ import { setupAntd } from '/@/setup/ant-design-vue';
 import { setupErrorHandle } from '/@/setup/error-handle/index';
 import { setupDirectives } from '/@/setup/directives/index';
 
-import { registerGlobComp } from '/@/components/registerGlobComp';
 import { isDevMode, isProdMode, isUseMock } from '/@/utils/env';
 import { setupProdMockServer } from '../mock/_createProductionServer';
+import { setApp } from './useApp';
 
 import App from './App.vue';
 import '/@/design/index.less';
@@ -26,8 +26,6 @@ setupDirectives(app);
 
 setupErrorHandle(app);
 
-registerGlobComp(app);
-
 router.isReady().then(() => {
   app.mount('#app');
 });
@@ -40,4 +38,5 @@ if (isDevMode()) {
 if (isProdMode() && isUseMock()) {
   setupProdMockServer();
 }
-export default app;
+
+setApp(app);

src/setup/ant-design-vue/index.ts

@@ -2,13 +2,13 @@
 
 import type { App } from 'vue';
 
-import { Form, Input, Button } from 'ant-design-vue';
+import { Form, Input } from 'ant-design-vue';
 import 'ant-design-vue/dist/antd.css';
 
 import './spin';
 
 export function setupAntd(app: App<Element>) {
-  app.component(Button.Group.name, Button.Group);
+  // 这两个组件在登录也就用。全局注册
   app.use(Form);
   app.use(Input);
 }

src/useApp.ts

@@ -1,5 +1,5 @@
 import type { ProjectConfig } from '/@/types/config';
-
+import type { App } from 'vue';
 import { computed, ref } from 'vue';
 
 import { ThemeModeEnum } from '/@/enums/appEnum';
@@ -17,6 +17,15 @@ import { PageEnum } from '/@/enums/pageEnum';
 import { useTimeout } from '/@/hooks/core/useTimeout';
 import { ExceptionEnum } from '/@/enums/exceptionEnum';
 
+let app: App;
+export function setApp(_app: App): void {
+  app = _app;
+}
+
+export function getApp(): App {
+  return app;
+}
+
 // TODO 主题切换
 export function useThemeMode(mode: ThemeModeEnum) {
   const modeRef = ref(mode);

src/views/sys/login/Login.vue

@@ -49,8 +49,10 @@
   import { appStore } from '/@/store/modules/app';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useSetting } from '/@/hooks/core/useSetting';
+  import Button from '/@/components/Button/index.vue';
+
   export default defineComponent({
-    components: { BasicDragVerify },
+    components: { BasicDragVerify, AButton: Button },
     setup() {
       const { globSetting } = useSetting();
       const { notification } = useMessage();

vite.config.ts

@@ -133,8 +133,7 @@ const viteConfig: UserConfig = {
       javascriptEnabled: true,
     },
   },
-  // 配置Dep优化行为
+  // 会使用 rollup 对 包重新编译，将编译成符合 esm 模块规范的新的包放入 node_modules/.vite_opt_cache
-  // 会使用 rollup 对 包重新编译，将编译成符合 esm 模块规范的新的包放入 node_modules 下的 .
   optimizeDeps: {
     include: [
       'echarts',