feat: optimize building chunks

flingyp · Jun 8, 2023 · 5c7a468 · 5c7a468
1 parent 0e68e18
commit 5c7a468
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -43,6 +43,7 @@ declare global {
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const internationalReg: typeof import('./src/utils/i18n')['internationalReg']
   const isDarkColor: typeof import('./src/utils/colord')['isDarkColor']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isLightColor: typeof import('./src/utils/colord')['isLightColor']
@@ -114,6 +115,7 @@ declare global {
   const toReduceSaturate: typeof import('./src/utils/colord')['toReduceSaturate']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const transformMenu: typeof import('./src/utils/i18n')['transformMenu']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -355,6 +357,7 @@ declare module 'vue' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly internationalReg: UnwrapRef<typeof import('./src/utils/i18n')['internationalReg']>
     readonly isDarkColor: UnwrapRef<typeof import('./src/utils/colord')['isDarkColor']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isLightColor: UnwrapRef<typeof import('./src/utils/colord')['isLightColor']>
@@ -426,6 +429,7 @@ declare module 'vue' {
     readonly toReduceSaturate: UnwrapRef<typeof import('./src/utils/colord')['toReduceSaturate']>
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly transformMenu: UnwrapRef<typeof import('./src/utils/i18n')['transformMenu']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>

diff --git a/components.d.ts b/components.d.ts
@@ -22,7 +22,6 @@ declare module '@vue/runtime-core' {
     'IconLineMd:menuFoldRight': typeof import('~icons/line-md/menu-fold-right')['default']
     'IconLineMd:sunnyOutlineLoop': typeof import('~icons/line-md/sunny-outline-loop')['default']
     'IconLineMd:sunnyOutlineToMoonAltLoopTransition': typeof import('~icons/line-md/sunny-outline-to-moon-alt-loop-transition')['default']
-    'IconLogos:naiveui': typeof import('~icons/logos/naiveui')['default']
     'IconMaterialSymbols:keyboardDoubleArrowLeftRounded': typeof import('~icons/material-symbols/keyboard-double-arrow-left-rounded')['default']
     'IconMaterialSymbols:keyboardDoubleArrowRightRounded': typeof import('~icons/material-symbols/keyboard-double-arrow-right-rounded')['default']
     'IconMdi:github': typeof import('~icons/mdi/github')['default']
@@ -41,17 +40,13 @@ declare module '@vue/runtime-core' {
     'IconOpenmoji:annoyedFaceWithTongue': typeof import('~icons/openmoji/annoyed-face-with-tongue')['default']
     'IconOpenmoji:apple': typeof import('~icons/openmoji/apple')['default']
     'IconUil:alignJustify': typeof import('~icons/uil/align-justify')['default']
-    NAlert: typeof import('naive-ui')['NAlert']
-    NAutoComplete: typeof import('naive-ui')['NAutoComplete']
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
-    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDescriptions: typeof import('naive-ui')['NDescriptions']
     NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
@@ -68,17 +63,12 @@ declare module '@vue/runtime-core' {
     NLayoutFooter: typeof import('naive-ui')['NLayoutFooter']
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
-    NLayoutSlider: typeof import('naive-ui')['NLayoutSlider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
-    NProgress: typeof import('naive-ui')['NProgress']
-    NRadio: typeof import('naive-ui')['NRadio']
     NSelect: typeof import('naive-ui')['NSelect']
-    NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
-    NTag: typeof import('naive-ui')['NTag']
     RenderIconify: typeof import('./src/components/common/RenderIconify.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,4 +1,4 @@
-import { ConfigEnv, UserConfigExport } from 'vite'
+import { ConfigEnv, UserConfigExport, splitVendorChunkPlugin } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
 import { viteMockServe as ViteMockServe } from 'vite-plugin-mock'
@@ -115,21 +115,32 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => ({
           var: 'Vditor',
           path: 'https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js',
         },
+        {
+          name: '@wangeditor/editor',
+          var: 'wangEditor',
+          path: 'https://cdn.jsdelivr.net/npm/@wangeditor/editor@5.1.23/dist/index.min.js',
+        },
       ],
     }),
+    // 将 node_modules 中的模块打包到自定义 vendor chunk 中，利用浏览器缓存机制，加快页面加载速度
+    // Vite >= 2.9.0+ automatically splits vendor chunks when using the build command.
+    // Reference: https://cn.vitejs.dev/guide/build.html#chunking-strategy
+    splitVendorChunkPlugin(),
   ],
   // Build config
   build: {
     rollupOptions: {
-      output: {
-        // https://www.rollupjs.com/guide/big-list-of-options#outputmanualchunks
-        // 将 node_modules 中的模块打包到自定义 vendor chunk 中，利用浏览器缓存机制，加快页面加载速度
-        manualChunks: (id) => {
-          if (id.includes('node_modules')) {
-            return 'vendor'
-          }
-        },
-      },
+      // Vite < 2.9.0 does not automatically split vendor chunks when using the build command.
+      // Reference: https://cn.vitejs.dev/guide/build.html#chunking-strategy
+      // output: {
+      //   // https://www.rollupjs.com/guide/big-list-of-options#outputmanualchunks
+      //   // 将 node_modules 中的模块打包到自定义 vendor chunk 中，利用浏览器缓存机制，加快页面加载速度
+      //   manualChunks: (id) => {
+      //     if (id.includes('node_modules')) {
+      //       return 'vendor'
+      //     }
+      //   },
+      // },
     },
   },
 })