examples/vue-ts-example-2025
1
1
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

build(配置): 优化代码分割配置

Browse Source
This commit is contained in:
严浩
2025-09-09 19:14:04 +08:00
parent 4851b83c37
commit da1da07474
6 changed files with 125 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -100,6 +100,7 @@
"nprogress": "^0.2.0",
"oxlint": "~1.14.0",
"prettier": "3.6.2",
"rolldown": "1.0.0-beta.36",
"typescript": "~5.9.2",
"unocss": "^66.5.1",
"unocss-preset-animations": "^1.2.1",

12
pnpm-lock.yaml generated
View File

@@ -144,6 +144,9 @@ importers:
prettier:
specifier: 3.6.2
version: 3.6.2
rolldown:
specifier: 1.0.0-beta.36
version: 1.0.0-beta.36
typescript:
specifier: ~5.9.2
version: 5.9.2
@@ -194,7 +197,7 @@ importers:
version: 3.2.4(@types/node@22.18.1)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(yaml@2.8.1)
vue-macros:
specifier: 3.0.0-beta.23
version: 3.0.0-beta.23(@vueuse/core@13.9.0(vue@3.5.21(typescript@5.9.2)))(esbuild@0.25.9)(rolldown-vite@7.1.8(@types/node@22.18.1)(esbuild@0.25.9)(jiti@2.5.1)(yaml@2.8.1))(rollup@4.50.1)(typescript@5.9.2)(vue-tsc@3.0.6(typescript@5.9.2))(vue@3.5.21(typescript@5.9.2))
version: 3.0.0-beta.23(@vueuse/core@13.9.0(vue@3.5.21(typescript@5.9.2)))(esbuild@0.25.9)(rolldown-vite@7.1.8(@types/node@22.18.1)(esbuild@0.25.9)(jiti@2.5.1)(yaml@2.8.1))(rolldown@1.0.0-beta.36)(rollup@4.50.1)(typescript@5.9.2)(vue-tsc@3.0.6(typescript@5.9.2))(vue@3.5.21(typescript@5.9.2))
vue-tsc:
specifier: ^3.0.6
version: 3.0.6(typescript@5.9.2)
@@ -8857,9 +8860,10 @@ snapshots:
optionalDependencies:
'@vueuse/core': 13.9.0(vue@3.5.21(typescript@5.9.2))
unplugin-combine@2.1.2(esbuild@0.25.9)(rolldown-vite@7.1.8(@types/node@22.18.1)(esbuild@0.25.9)(jiti@2.5.1)(yaml@2.8.1))(rollup@4.50.1)(unplugin@2.3.10):
unplugin-combine@2.1.2(esbuild@0.25.9)(rolldown-vite@7.1.8(@types/node@22.18.1)(esbuild@0.25.9)(jiti@2.5.1)(yaml@2.8.1))(rolldown@1.0.0-beta.36)(rollup@4.50.1)(unplugin@2.3.10):
optionalDependencies:
esbuild: 0.25.9
rolldown: 1.0.0-beta.36
rollup: 4.50.1
unplugin: 2.3.10
vite: rolldown-vite@7.1.8(@types/node@22.18.1)(esbuild@0.25.9)(jiti@2.5.1)(yaml@2.8.1)
@@ -9180,7 +9184,7 @@ snapshots:
'@vue/devtools-api': 6.6.4
vue: 3.5.21(typescript@5.9.2)
vue-macros@3.0.0-beta.23(@vueuse/core@13.9.0(vue@3.5.21(typescript@5.9.2)))(esbuild@0.25.9)(rolldown-vite@7.1.8(@types/node@22.18.1)(esbuild@0.25.9)(jiti@2.5.1)(yaml@2.8.1))(rollup@4.50.1)(typescript@5.9.2)(vue-tsc@3.0.6(typescript@5.9.2))(vue@3.5.21(typescript@5.9.2)):
vue-macros@3.0.0-beta.23(@vueuse/core@13.9.0(vue@3.5.21(typescript@5.9.2)))(esbuild@0.25.9)(rolldown-vite@7.1.8(@types/node@22.18.1)(esbuild@0.25.9)(jiti@2.5.1)(yaml@2.8.1))(rolldown@1.0.0-beta.36)(rollup@4.50.1)(typescript@5.9.2)(vue-tsc@3.0.6(typescript@5.9.2))(vue@3.5.21(typescript@5.9.2)):
dependencies:
'@vue-macros/better-define': 3.0.0-beta.23(vue@3.5.21(typescript@5.9.2))
'@vue-macros/boolean-prop': 3.0.0-beta.23(vue@3.5.21(typescript@5.9.2))
@@ -9212,7 +9216,7 @@ snapshots:
'@vue-macros/short-vmodel': 3.0.0-beta.23(vue@3.5.21(typescript@5.9.2))
'@vue-macros/volar': 3.0.0-beta.23(typescript@5.9.2)(vue-tsc@3.0.6(typescript@5.9.2))(vue@3.5.21(typescript@5.9.2))
unplugin: 2.3.10
unplugin-combine: 2.1.2(esbuild@0.25.9)(rolldown-vite@7.1.8(@types/node@22.18.1)(esbuild@0.25.9)(jiti@2.5.1)(yaml@2.8.1))(rollup@4.50.1)(unplugin@2.3.10)
unplugin-combine: 2.1.2(esbuild@0.25.9)(rolldown-vite@7.1.8(@types/node@22.18.1)(esbuild@0.25.9)(jiti@2.5.1)(yaml@2.8.1))(rolldown@1.0.0-beta.36)(rollup@4.50.1)(unplugin@2.3.10)
unplugin-vue-define-options: 3.0.0-beta.23(vue@3.5.21(typescript@5.9.2))
vue: 3.5.21(typescript@5.9.2)
transitivePeerDependencies:

3
src/main.ts
View File

@@ -7,7 +7,6 @@ import App from './App.vue'
const autoInstallModules = import.meta.glob('./plugins/!(index).ts', { eager: true })
// import { setupPlugins } from './plugins'
const setupPlugins = (await import('./plugins')).setupPlugins
import { setupPlugins } from './plugins'
setupPlugins(createApp(App), autoInstallModules).mount('#app')

108
vite.config.solit-chunks.ts Normal file
View File

@@ -0,0 +1,108 @@
import path from 'node:path'
import type { OutputOptions } from 'rolldown'
export function createRolldownSplitChunks(): OutputOptions['advancedChunks'] {
// https://www.npmjs.com/package/utils4u/v/2.19.2?activeTab=code
function _formatFilename(id: string, prefix: string) {
const filename = path
.basename(id)
.split('?')[0]
.replace(/\.\w+$/, '')
return `${prefix}/${filename}`
}
function _isInNodeModules(id: string) {
return id.includes('node_modules')
}
function _getPkgName(moduleId: string) {
if (_isInNodeModules(moduleId)) {
let pkgName = moduleId
pkgName = pkgName.split('.pnpm/')?.[1] || pkgName
pkgName = pkgName.split('node_modules/')?.[1] || pkgName
pkgName = pkgName.startsWith('@')
? pkgName.split('/')[0] + '/' + pkgName.split('/')[1]
: pkgName.split('/')[0]
return pkgName
}
}
return {
groups: [
{
name: 'vendors',
test(id) {
return id.includes('node_modules')
},
},
{
name: 'app',
test(id) {
return !id.includes('node_modules')
},
},
{
name: 'vue',
test(moduleId) {
return _getPkgName(moduleId) === 'vue' || _getPkgName(moduleId)?.startsWith('@vue/')
},
priority: 20,
},
// {
// name(moduleId, _ctx) {
// if (_isInNodeModules(moduleId)) {
// let pkgName = moduleId
// pkgName = pkgName.split('.pnpm/')?.[1] || pkgName
// pkgName = pkgName.split('node_modules/')?.[1] || pkgName
// pkgName = pkgName.startsWith('@')
// ? pkgName.split('/')[0] + '/' + pkgName.split('/')[1]
// : pkgName.split('/')[0]
// if (pkgName.startsWith('@vue/')) pkgName = 'vue'
// // console.debug(`pkgName :>> `, pkgName)
// // if (
// // pkgName === 'primevue' ||
// // pkgName.startsWith('@primevue') ||
// // pkgName.startsWith('@primeuix')
// // ) {
// // return 'libs/primevue'
// // }
// console.debug(`_getPkgName(moduleId) :>> `, _getPkgName(moduleId))
// // if (pkgName === 'vue') {
// // return 'libs/vue'
// // }
// }
// },
// priority: 10,
// },
// {
// name: (moduleId) => (moduleId.includes('node_modules') ? 'libs' : 'app'),
// // 1 KB = 1024 字节，所以 102400 ÷ 1024 = 100 KB
// // minSize: 100 * 1024,
// },
// {
// name: 'libs',
// test: /node_modules/,
// },
// {
// name: 'vue',
// test: /node_modules[\\/]vue/,
// },
// {
// name(moduleId, _ctx) {
// if (isInNodeModules(moduleId)) {
// let pkgName = moduleId
// pkgName = pkgName.split('.pnpm/')?.[1] || pkgName
// pkgName = pkgName.split('node_modules/')?.[1] || pkgName
// pkgName = pkgName.startsWith('@')
// ? pkgName.split('/')[0] + '/' + pkgName.split('/')[1]
// : pkgName.split('/')[0]
// if (pkgName.startsWith('@vue/')) pkgName = 'vue'
// return `libs/${pkgName}`;
// }
// },
// },
],
}
}

48
vite.config.ts
View File

@@ -1,22 +1,9 @@
import { fileURLToPath, URL } from 'node:url'
import { createViteProxy } from 'utils4u/vite'
import { defineConfig, type DepOptimizationOptions } from 'vite'
import { createViteProxy } from 'utils4u/vite'
import path from 'node:path'
import { Plugins } from './vite.config.plugins'
function formatFilename(id: string, prefix: string) {
const filename = path
.basename(id)
.split('?')[0]
.replace(/\.\w+$/, '')
return `${prefix}/${filename}`
}
function isInNodeModules(id: string) {
return id.includes('node_modules')
}
import { createRolldownSplitChunks } from './vite.config.solit-chunks'
// https://vite.dev/config/
export default defineConfig(({ command /* mode */ }) => {
@@ -27,36 +14,7 @@ export default defineConfig(({ command /* mode */ }) => {
build: {
rolldownOptions: {
output: {
advancedChunks: {
groups: [
{
name: (moduleId) => (moduleId.includes('node_modules') ? 'libss' : 'app'),
// minSize: 100 * 1024,
},
{
name: 'libs',
test: /node_modules/,
},
// {
// name: 'vue',
// test: /node_modules[\\/]vue/,
// },
// {
// name(moduleId, _ctx) {
// if (isInNodeModules(moduleId)) {
// let pkgName = moduleId
// pkgName = pkgName.split('.pnpm/')?.[1] || pkgName
// pkgName = pkgName.split('node_modules/')?.[1] || pkgName
// pkgName = pkgName.startsWith('@')
// ? pkgName.split('/')[0] + '/' + pkgName.split('/')[1]
// : pkgName.split('/')[0]
// if (pkgName.startsWith('@vue/')) pkgName = 'vue'
// return `libs/${pkgName}`;
// }
// },
// },
],
},
advancedChunks: createRolldownSplitChunks(),
},
},
},

5
vitest.config.ts
View File

@@ -3,7 +3,10 @@ import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(
viteConfig,
viteConfig({
command: 'build',
mode: 'test',
}),
defineConfig({
test: {
environment: 'jsdom',