给我的前端项目开应用分身

在 .env 中添加通用替换变量

VITE_WEBSITE_TITLE="我的回忆录A"
VITE_WEBSITE_BEIAN="粤ICP备2021138173号"
VITE_WEBSITE_FAVICON="/favicon.png"
VITE_COLOR_PRIMARY="#2f54eb"
VITE_SPINNER_COLOR="#1677ff"
VITE_SPINNER_COLOR_DARK="#4096ff"

在 router.ts 中分离路由

const routes: RouteObject[] = []

if (import.meta.env.MODE === 'someapp') {
    routes.push(...)
} else {
    routes.push(...)
}

如此，用 pnpm run build --mode someapp 构建的产物只会包含必要路由的代码。

尽量使用 LazyRoute

/**
 * For lazy route, the component must have a default export.
 * @param importedComponent `await import('./pages/SomeComponent.tsx')`
 * @see https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
 */
function LazyRoute(importedComponent: { default: React.ComponentType }): LazyRouteFunction<RouteObject> {
    return async () => {
        const { default: Component } = importedComponent
        return { Component }
    }
}