add: 添加自定义打包拆分工具

cfg.ts

@@ -44,15 +44,28 @@ import {
   mixinCSSPlugin,
 } from './vite-plugin/index'
 import { APP_THEME } from './src/appConfig/designConfig'
-import {
-  PRE_LOADING_CONFIG,
-  ROOT_ROUTE,
-  SIDE_BAR_LOGO,
-} from './src/appConfig/appConfig'
+import { PRE_LOADING_CONFIG, SIDE_BAR_LOGO } from './src/appConfig/appConfig'
 
 import type { AppConfigExport } from '@/types/modules/cfg'
 
 const config: AppConfigExport = {
+  /** 自定义配置构建(打包)输出 chunk */
+  chunkSplitVendor: {
+    // `vue` `vue-router` `pinia` 会被打包到一个名为`vue-vendor`的 chunk 里面(包括它们的一些依赖)
+    'vue-vendor': ['vue', 'vue-router', 'pinia'],
+    // 源码中 src/utils 目录的代码都会打包进 `utils-vendor` 这个 chunk 中
+    'utils-vendor': [/src\/utils/, 'lodash-es'],
+    /**
+     *
+     * 源码中 src/locales 目录的代码都会打包进 `locales-vendor` 这个 chunk 中
+     * 如果未来语言包过大, 请将 lang 语言独立出去
+     *
+     * Tip
+     * 模板配置了 @intlify/unplugin-vue-i18n/vite 插件, 会自动将 json 语言包转换为 js 文件
+     */
+    'locales-vendor': [/src\/locales/],
+    'css-vendor': [/src\/styles/],
+  },
   /** 公共基础路径配置, 如果为空则会默认以 '/' 填充 */
   base: '/ray-template/',
   /** 配置首屏加载信息 */

package.json

@@ -78,6 +78,7 @@
     "unplugin-auto-import": "^0.11.0",
     "unplugin-vue-components": "^0.22.0",
     "vite": "^4.3.9",
+    "vite-plugin-chunk-split": "^0.4.7",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.6.4",
     "vite-plugin-eslint": "^1.8.1",

src/types/modules/cfg.ts

@@ -49,6 +49,7 @@ export interface Config {
   preloadingConfig?: PreloadingConfig
   base?: string
   appPrimaryColor?: AppPrimaryColor
+  chunkSplitVendor: Record<string, (string | RegExp)[]>
 }
 
 /**

vite.config.ts

@@ -16,6 +16,7 @@ import vitePluginImp from 'vite-plugin-imp' // 按需打包工具
 import { visualizer } from 'rollup-plugin-visualizer' // 打包体积分析工具
 import viteCompression from 'vite-plugin-compression' // 压缩打包
 import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs'
+import { chunkSplitPlugin as viteChunkSplitPlugin } from 'vite-plugin-chunk-split'
 
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' // 模板自动导入组件并且按需打包
 
@@ -34,6 +35,7 @@ const {
   appPrimaryColor,
   preloadingConfig,
   base,
+  chunkSplitVendor,
 } = config
 
 /**
@@ -68,6 +70,10 @@ export default defineConfig(async ({ mode }) => {
     plugins: [
       vue({ reactivityTransform: true }),
       viteVueJSX(),
+      viteChunkSplitPlugin({
+        strategy: 'default',
+        customSplitting: chunkSplitVendor,
+      }),
       title,
       viteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态)
       viteVeI18nPlugin(),