diff --git a/cfg.ts b/cfg.ts index 01d41f59..88ba2460 100644 --- a/cfg.ts +++ b/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/', /** 配置首屏加载信息 */ diff --git a/package.json b/package.json index c2d77838..c639cae1 100644 --- a/package.json +++ b/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", diff --git a/src/types/modules/cfg.ts b/src/types/modules/cfg.ts index aadb2165..2821ebcf 100644 --- a/src/types/modules/cfg.ts +++ b/src/types/modules/cfg.ts @@ -49,6 +49,7 @@ export interface Config { preloadingConfig?: PreloadingConfig base?: string appPrimaryColor?: AppPrimaryColor + chunkSplitVendor: Record } /** diff --git a/vite.config.ts b/vite.config.ts index 9fa84a54..050f3acc 100644 --- a/vite.config.ts +++ b/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(),