Optimize loading speed (#45)

Co-authored-by: Germey <[email protected]>

change/@acedatacloud-nexior-238289af-bd05-4247-898b-5fc673c99e3d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "optimize loading speed",
+  "packageName": "@acedatacloud/nexior",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -60,8 +60,8 @@
     "vuex-persistedstate": "^4.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "^3.0.0",
     "@acedatacloud/transmart-cli": "^0.5.0",
+    "@rollup/plugin-replace": "^3.0.0",
     "@types/lodash": "^4.14.172",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^16.7.4",
@@ -92,7 +92,7 @@
     "tailwindcss": "^3.4.0",
     "typescript": "^4.9.5",
     "vite": "^2.9.16",
-    "vite-bundle-visualizer": "^1.0.0",
+    "vite-bundle-visualizer": "1.0",
     "vue-tsc": "^1.2.0"
   },
   "bugs": {

src/components/common/MarkdownRenderer.vue

@@ -5,9 +5,14 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import VueMarkdown from './VueMarkdown.vue';
+import { highlight } from '@/utils';
+import 'highlight.js/styles/night-owl.css';
 
 export default defineComponent({
   name: 'ApiCode',
+  directives: {
+    highlight
+  },
   components: {
     VueMarkdown
   },

src/i18n/index.ts

@@ -84,17 +84,20 @@ export const loadLocaleMessages = async (i18n: I18n, locale: string) => {
     'chatdoc'
   ];
 
+  const promises = names.map((name) => loadLocalResource(name, locale));
+  const resources = await Promise.all(promises);
+
   const messages: any = {};
-  for (const name of names) {
-    const resource = await loadLocalResource(name, locale);
+  names.forEach((name, index) => {
+    const resource = resources[index];
     console.log('resource', resource);
     for (const key in resource) {
       if (resource.hasOwnProperty(key)) {
         const element = resource[key];
         messages[`${name}.${key}`] = element.message;
       }
     }
-  }
+  });
 
   // set locale and locale message
   i18n.global.setLocaleMessage(locale, messages);

src/main.ts

@@ -9,9 +9,6 @@ import 'mac-scrollbar/dist/mac-scrollbar.css';
 import dayjs from './plugins/dayjs';
 import './plugins/font-awesome';
 import { vLoading } from 'element-plus';
-import hl from 'highlight.js';
-import 'highlight.js/styles/night-owl.css';
-import copyToClipboard from 'copy-to-clipboard';
 import { initializeCookies, initializeFavicon, initializeTitle } from './utils/initializer';
 import config from './plugins/config';
 
@@ -33,22 +30,6 @@ const main = async () => {
   app.mount('#app');
   console.debug('app mounted');
 
-  app.directive('highlight', async (el) => {
-    const blocks = el.querySelectorAll('pre code');
-    blocks.forEach((block: HTMLPreElement) => {
-      // create the copy button
-      const copy = document.createElement('button');
-      copy.innerHTML = i18n.global.t('common.button.copy').toString();
-      // add the event listener to each click
-      copy.addEventListener('click', () => {
-        copyToClipboard(block.innerText);
-      });
-      // append the copy button to each code block
-      block.parentElement?.prepend(copy);
-      hl.highlightBlock(block);
-    });
-  });
-
   // make app available globally
   // @ts-ignore
   window.app = app;

src/utils/highlight.ts

@@ -0,0 +1,25 @@
+import i18n from '@/i18n';
+import copyToClipboard from 'copy-to-clipboard';
+
+export const highlight = async (el: HTMLElement) => {
+  const hl = (await import('highlight.js')).default;
+  console.debug('highlight.js loaded');
+  const blocks = el.querySelectorAll('pre code');
+  blocks.forEach((block) => {
+    // create the copy button
+    const copy = document.createElement('button');
+    copy.innerHTML = i18n.global.t('common.button.copy').toString();
+    // add the event listener to each click
+    copy.addEventListener('click', () => {
+      // @ts-ignore
+      copyToClipboard(block.innerText);
+    });
+    // append the copy button to each code block
+    // check already has copy button
+    if (!block.parentElement?.querySelector('button')) {
+      block.parentElement?.prepend(copy);
+    }
+    // @ts-ignore
+    hl.highlightBlock(block);
+  });
+};

src/utils/index.ts

@@ -1,3 +1,6 @@
 export * from './baseUrl';
 export * from './mode';
 export * from './log';
+export * from './initializer';
+export * from './highlight';
+export * from './is';

vite.config.ts

@@ -53,7 +53,18 @@ export default defineConfig((config: ConfigEnv) => {
         output: {
           manualChunks(id) {
             if (id.includes('node_modules')) {
-              const modules = ['@vue', 'element-plus', 'axios', 'highlight.js'];
+              const modules = [
+                '@vue',
+                'element-plus',
+                'axios',
+                'highlight.js',
+                'mustache',
+                'markdown',
+                'fortawesome',
+                'qrcode',
+                'vue-dark-switch',
+                'chart.js'
+              ];
               const chunk = modules.find((module) => id.includes(module));
               return chunk ? `vendor-${chunk}` : 'vendor-others';
             }

yarn.lock

@@ -3967,7 +3967,16 @@ sprintf-js@~1.0.2:
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4001,7 +4010,7 @@ string.prototype.trimstart@^1.0.4:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -4015,6 +4024,13 @@ strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz"
@@ -4301,10 +4317,10 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz"
   integrity sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==
 
-vite-bundle-visualizer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/vite-bundle-visualizer/-/vite-bundle-visualizer-1.0.0.tgz"
-  integrity sha512-25+1XydP08lE373O0kHn/9C/n0A8NM4CEpWAXhObemTXYnSOnil++bXUTIeNCMA26fU9CBebUI7+Nj/OfL+2JA==
+vite-bundle-visualizer@1.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vite-bundle-visualizer/-/vite-bundle-visualizer-1.0.1.tgz#56dd88942c9415921213d47f0e78274325339c78"
+  integrity sha512-JdUu5viGyw7K1HMstqaAN7y1rnNz93srGeF7FJgFCzM7NL1nH/QlpywDA296qv/KjPPPsq60mOJhtXddikVKSA==
   dependencies:
     cac "^6.7.14"
     import-from-esm "^1.3.3"
@@ -4476,8 +4492,7 @@ workspace-tools@^0.36.3:
     js-yaml "^4.1.0"
     micromatch "^4.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -4495,6 +4510,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"