jeecgboot-vue3首次加载时间优化

jeecg3.6首次加载时间比较长，有时需要十来秒，体验挺不好，需要优化一下。

加载时间长的原因是加载的资源比较大，开发环境下有30多M，生产环境下也有15M左右，这么大的依赖包，加载起来肯定会慢。

知道了为什么加载慢了，优化方法也就有了，那就是去掉不需要的依赖。具体方法如下：

1. 去掉百度统计代码，这个是为了减少不必要的请求

diff --git a/index.html b/index.html
index 67ddad8..c80afd8 100644
--- a/index.html
+++ b/index.html
@@ -166,14 +166,5 @@
       </div>
     </div>
     <script type="module" src="/src/main.ts"></script>
-    <script>
-      var _hmt = _hmt || [];
-      (function() {
-        var hm = document.createElement("script");
-        hm.src = "https://hm.baidu.com/hm.js?0febd9e3cacb3f627ddac64d52caac39";
-        var s = document.getElementsByTagName("script")[0];
-        s.parentNode.insertBefore(hm, s);
-      })();
-    </script>
   </body>

2. 去掉JCodeEditor组件依赖

diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
index b18d36d..d6515c5 100644
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@@ -14,7 +14,7 @@ export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
 export { default as JAreaLinkage } from './src/jeecg/components/JAreaLinkage.vue';
 export { default as JSelectUser } from './src/jeecg/components/JSelectUser.vue';
 export { default as JSelectDept } from './src/jeecg/components/JSelectDept.vue';
-export { default as JCodeEditor } from './src/jeecg/components/JCodeEditor.vue';
+// export { default as JCodeEditor } from './src/jeecg/components/JCodeEditor.vue';
 export { default as JCategorySelect } from './src/jeecg/components/JCategorySelect.vue';
 export { default as JSelectMultiple } from './src/jeecg/components/JSelectMultiple.vue';
 export { default as JPopup } from './src/jeecg/components/JPopup.vue';
diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts
index 9f9e91b..787641d 100644
--- a/src/components/Form/src/componentMap.ts
+++ b/src/components/Form/src/componentMap.ts
@@ -40,7 +40,7 @@ import JAreaSelect from './jeecg/components/JAreaSelect.vue';
 import JEditor from './jeecg/components/JEditor.vue';
 import JMarkdownEditor from './jeecg/components/JMarkdownEditor.vue';
 import JSelectInput from './jeecg/components/JSelectInput.vue';
-import JCodeEditor from './jeecg/components/JCodeEditor.vue';
+// import JCodeEditor from './jeecg/components/JCodeEditor.vue';
 import JCategorySelect from './jeecg/components/JCategorySelect.vue';
 import JSelectMultiple from './jeecg/components/JSelectMultiple.vue';
 import JPopup from './jeecg/components/JPopup.vue';
@@ -112,7 +112,7 @@ componentMap.set('JAreaSelect', JAreaSelect);
 componentMap.set('JEditor', JEditor);
 componentMap.set('JMarkdownEditor', JMarkdownEditor);
 componentMap.set('JSelectInput', JSelectInput);
-componentMap.set('JCodeEditor', JCodeEditor);
+// componentMap.set('JCodeEditor', JCodeEditor);
 componentMap.set('JCategorySelect', JCategorySelect);
 componentMap.set('JSelectMultiple', JSelectMultiple);
 componentMap.set('JPopup', JPopup);

 3. 去掉全局注册仪表盘

diff --git a/src/components/registerGlobComp.ts b/src/components/registerGlobComp.ts
index ef97488..9535306 100644
--- a/src/components/registerGlobComp.ts
+++ b/src/components/registerGlobComp.ts
@@ -2,7 +2,7 @@ import type { App } from 'vue';
 import { Icon } from './Icon';
 import AIcon from '/@/components/jeecg/AIcon.vue';
 //Tinymce富文本
-import Editor from '/@/components/Tinymce/src/Editor.vue';
+// import Editor from '/@/components/Tinymce/src/Editor.vue';

 import { Button, JUploadButton } from './Button';

@@ -61,16 +61,16 @@ import {
 const compList = [AntButton.Group, Icon, AIcon, JUploadButton];

 //敲敲云—仪表盘设计器（拖拽设计）
-import DragEngine from '@qiaoqiaoyun/drag-free';
-import('@qiaoqiaoyun/drag-free/lib/index.css');
-console.log('---初始化---， 全局注册仪表盘--------------');
+// import DragEngine from '@qiaoqiaoyun/drag-free';
+// import('@qiaoqiaoyun/drag-free/lib/index.css');
+// console.log('---初始化---， 全局注册仪表盘--------------');

 export function registerGlobComp(app: App) {
   compList.forEach((comp) => {
     app.component(comp.name || comp.displayName, comp);
   });
   //仪表盘依赖Tinymce，需要提前加载（没办法按需加载了）
-  app.component(Editor.name, Editor);
+  // app.component(Editor.name, Editor);

   app
     .use(Select)
@@ -118,7 +118,7 @@ export function registerGlobComp(app: App) {
     .use(InputNumber)
     .use(Carousel)
     .use(Popconfirm)
-    .use(DragEngine)
+    // .use(DragEngine)
     .use(Skeleton)
     .use(Cascader)

4. 去掉全局注册JVxeTable

diff --git a/src/settings/registerThirdComp.ts b/src/settings/registerThirdComp.ts
index bb74e6a..757e01c 100644
--- a/src/settings/registerThirdComp.ts
+++ b/src/settings/registerThirdComp.ts
@@ -1,6 +1,6 @@
 import type { App } from 'vue';
-import { registerJVxeTable } from '/@/components/jeecg/JVxeTable';
-import { registerJVxeCustom } from '/@/components/JVxeCustom';
+// import { registerJVxeTable } from '/@/components/jeecg/JVxeTable';
+// import { registerJVxeCustom } from '/@/components/JVxeCustom';

 // 注册全局聊天表情包
 import { Picker } from 'emoji-mart-vue-fast/src';
@@ -12,9 +12,9 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
 export async function registerThirdComp(app: App) {
   //---------------------------------------------------------------------
   // 注册 JVxeTable 组件
-  registerJVxeTable(app);
+  // registerJVxeTable(app);
   // 注册 JVxeTable 自定义组件
-  await registerJVxeCustom();
+  // await registerJVxeCustom();
   //---------------------------------------------------------------------
   // 注册全局聊天表情包
   app.component('Picker', Picker);

5. 去掉注册全局聊天表情包

diff --git a/src/settings/registerThirdComp.ts b/src/settings/registerThirdComp.ts
index 757e01c..08f8e04 100644
--- a/src/settings/registerThirdComp.ts
+++ b/src/settings/registerThirdComp.ts
@@ -3,7 +3,7 @@ import type { App } from 'vue';
 // import { registerJVxeCustom } from '/@/components/JVxeCustom';

 // 注册全局聊天表情包
-import { Picker } from 'emoji-mart-vue-fast/src';
+// import { Picker } from 'emoji-mart-vue-fast/src';
 // 注册全局dayjs
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -17,7 +17,7 @@ export async function registerThirdComp(app: App) {
   // await registerJVxeCustom();
   //---------------------------------------------------------------------
   // 注册全局聊天表情包
-  app.component('Picker', Picker);
+  // app.component('Picker', Picker);

6. 删除demo及online依赖

删除
src/router/routes/mainOut.ts
src/router/routes/modules/demo/
src/views/demo/ 

修改 src/components/Form/src/hooks/useForm.ts

diff --git a/src/components/Form/src/hooks/useForm.ts b/src/components/Form/src/hooks/useForm.ts
index f0e66db..5fdbb19 100644
--- a/src/components/Form/src/hooks/useForm.ts
+++ b/src/components/Form/src/hooks/useForm.ts
@@ -8,7 +8,7 @@ import { error } from '/@/utils/log';
 import { getDynamicProps, getValueType } from '/@/utils';
-import { add } from "/@/components/Form/src/componentMap";
+// import { add } from "/@/components/Form/src/componentMap";
 //集成online专用控件
-import { OnlineSelectCascade, LinkTableCard, LinkTableSelect } from  '@jeecg/online';
+// import { OnlineSelectCascade, LinkTableCard, LinkTableSelect } from  '@jeecg/online';

 export declare type ValidateFields = (nameList?: NamePath[], options?: ValidateOptions) => Promise<Recordable>;

@@ -19,9 +19,9 @@ export function useForm(props?: Props): UseFormReturnType {
   const loadedRef = ref<Nullable<boolean>>(false);

   //集成online专用控件
-  add("OnlineSelectCascade", OnlineSelectCascade)
-  add("LinkTableCard", LinkTableCard)
-  add("LinkTableSelect", LinkTableSelect)
+  // add("OnlineSelectCascade", OnlineSelectCascade)
+  // add("LinkTableCard", LinkTableCard)
+  // add("LinkTableSelect", LinkTableSelect)

   async function getForm() {
     const form = unref(formRef);

修改 src/main.ts

diff --git a/src/main.ts b/src/main.ts
index f73ef78..5ed0c92 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -16,7 +16,7 @@ import { registerGlobComp } from '/@/components/registerGlobComp';
 import { registerThirdComp } from '/@/settings/registerThirdComp';
 import { useSso } from '/@/hooks/web/useSso';
 // 注册online模块lib
-import { registerPackages } from '/@/utils/monorepo/registerPackages';
+// import { registerPackages } from '/@/utils/monorepo/registerPackages';

 // 在本地开发中引入的,以提高浏览器响应速度
 if (import.meta.env.DEV) {
@@ -37,7 +37,7 @@ async function bootstrap() {
   initAppConfigStore();

   // 注册外部模块路由(注册online模块lib)
-  registerPackages(app);
+  // registerPackages(app);

   // 注册全局组件
   registerGlobComp(app);

修改 src/router/routes/index.ts

diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
index b2d00e1..ffdb4dc 100644
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -2,7 +2,6 @@ import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';

 import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';

-import { mainOutRoutes } from './mainOut';
 import { PageEnum } from '/@/enums/pageEnum';
 import { t } from '/@/hooks/web/useI18n';

@@ -65,4 +64,4 @@ export const TokenLoginRoute: AppRouteRecordRaw = {
 };

 // Basic routing without permission
-export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute];
+export const basicRoutes = [LoginRoute, RootRoute, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute];

经过上述修改之后，依赖包的体积在开发环境下能减少13M 左右，在生产环境下能减小一半左右。加载速度明显加快。当然，其实还有继续优化的空间，把自己项目中用不到的依赖都删掉就可以。

 欢迎关注微信公众号：文本魔术，了解更多