优化 Vite 配置,更新共享库列表,移除不必要的 Rollup 选项,并简化远程模块加载逻辑,提升代码可读性和维护性。

This commit is contained in:
jxxghp
2025-05-08 23:32:13 +08:00
parent 4e3a61b8a8
commit 3199392637
3 changed files with 2 additions and 72 deletions
-7
View File
@@ -36,13 +36,6 @@ export default defineConfig({
target: 'esnext', // 必须设置为esnext以支持顶层await target: 'esnext', // 必须设置为esnext以支持顶层await
minify: false, // 开发阶段建议关闭混淆 minify: false, // 开发阶段建议关闭混淆
cssCodeSplit: true, // 改为true以便能分离样式文件 cssCodeSplit: true, // 改为true以便能分离样式文件
rollupOptions: {
output: {
manualChunks: {
'vuetify-lib': ['vuetify'] // 将vuetify单独分离出来
}
}
}
}, },
css: { css: {
preprocessorOptions: { preprocessorOptions: {
+1 -64
View File
@@ -6,55 +6,12 @@ import {
// @ts-ignore // @ts-ignore
} from 'virtual:__federation__' } from 'virtual:__federation__'
// 扩展全局接口,添加federation所需的共享作用域
declare global {
interface Window {
__rf_placeholder__shareScope?: Record<string, any>
vue?: any
vuetify?: any
pinia?: any
'vue-i18n'?: any
'vue-router'?: any
axios?: any
}
}
// 定义远程模块接口 // 定义远程模块接口
interface RemoteModule { interface RemoteModule {
id: string id: string
url: string url: string
} }
/**
* 初始化共享作用域
*/
function initShareScope() {
// 确保全局共享作用域存在
if (!window.__rf_placeholder__shareScope) {
window.__rf_placeholder__shareScope = {}
}
// 为共享模块设置默认作用域
const shared = ['vue', 'vuetify', 'pinia', 'vue-i18n', 'vue-router', 'axios']
shared.forEach(lib => {
if (window.__rf_placeholder__shareScope) {
window.__rf_placeholder__shareScope[lib] = { default: { get: () => (window as any)[lib] } }
}
})
console.log('已初始化共享作用域:', window.__rf_placeholder__shareScope)
}
/**
* 添加一个dummy远程模块以解决生产环境中的共享作用域问题
*/
function addDummyRemote() {
__federation_method_setRemote('dummy', {
url: () => Promise.resolve(''),
format: 'esm',
from: 'vite',
shareScope: 'default',
})
}
/** /**
* 加载远程组件 * 加载远程组件
* @param id 远程模块ID * @param id 远程模块ID
@@ -83,13 +40,6 @@ async function fetchRemoteModules(): Promise<RemoteModule[]> {
} }
} }
/**
* 生成唯一的版本标记用于防止缓存
*/
function generateVersionTag(): string {
return `v=${Date.now()}`
}
/** /**
* 动态注入Federation Remote模块 * 动态注入Federation Remote模块
* @param modules 远程模块列表 * @param modules 远程模块列表
@@ -105,17 +55,10 @@ function injectRemoteModule(module: RemoteModule): void {
if (apiBase.endsWith('/')) { if (apiBase.endsWith('/')) {
apiBase = apiBase.slice(0, -1) apiBase = apiBase.slice(0, -1)
} }
// 添加版本标记防止缓存
const versionTag = generateVersionTag()
const remoteUrl = `${baseUrl.origin}/${apiBase}${module.url}`
const urlWithVersion = remoteUrl.includes('?') ? `${remoteUrl}&${versionTag}` : `${remoteUrl}?${versionTag}`
__federation_method_setRemote(module.id, { __federation_method_setRemote(module.id, {
url: () => Promise.resolve(urlWithVersion), url: () => Promise.resolve(`${baseUrl.origin}/${apiBase}${module.url}`),
format: 'esm', format: 'esm',
from: 'vite', from: 'vite',
shareScope: 'default',
}) })
console.log('已注入远程模块:', module) console.log('已注入远程模块:', module)
} }
@@ -125,12 +68,6 @@ function injectRemoteModule(module: RemoteModule): void {
*/ */
export async function loadRemoteComponents(): Promise<void> { export async function loadRemoteComponents(): Promise<void> {
try { try {
// 初始化共享作用域
initShareScope()
// 添加dummy远程模块解决生产环境问题
addDummyRemote()
// 获取远程模块列表 // 获取远程模块列表
const modules = await fetchRemoteModules() const modules = await fetchRemoteModules()
+1 -1
View File
@@ -38,7 +38,7 @@ export default defineConfig({
remotes: { remotes: {
// 动态remotes将在运行时注入 // 动态remotes将在运行时注入
}, },
shared: ['vue', 'vuetify', 'pinia', 'vue-i18n', 'vue-router', 'axios'], shared: ['vue', 'vuetify', 'vuetify/styles'],
}), }),
VitePWA({ VitePWA({
injectRegister: 'script', injectRegister: 'script',