模块注册表
当使用现代资产捆绑器（例如 Vite 或 Webpack）构建大型应用程序时，捆绑器在静态分析期间很难跟踪 src 属性（例如 <page-route src="./pages/home.js">）中的动态字符串导入。
模块注册表允许您预先注册其加载器函数的页面路径映射，从而在构建管道中实现正确的代码分割和资产跟踪。
registerRouteModules
注册其模块加载器函数的路径映射。
typescript
type ModuleLoader = () => Promise<any>
function registerRouteModules(modules: Record<string, ModuleLoader>): void集成示例
1. Vite (import.meta.glob)
Vite 支持自动导入匹配 glob 模式的多个文件：
javascript
import { registerRouteModules } from '@beforesemicolon/router'
// 1. Gather all page components (lazy loaders)
const modules = import.meta.glob('./pages/**/*.{ts,js,html}', { eager: false })
// 2. Register with router
registerRouteModules(modules)2. Webpack (require.context)
Webpack 使用 require.context 来跟踪目录结构：
javascript
import { registerRouteModules } from '@beforesemicolon/router'
const context = require.context('./pages', true, /\.(ts|js|html)$/)
const modules = {}
context.keys().forEach((key) => {
// Map paths to loaders
modules[key] = () => Promise.resolve(context(key))
})
registerRouteModules(modules)3. 手动注册
您还可以手动映射导入：
javascript
import { registerRouteModules } from '@beforesemicolon/router'
registerRouteModules({
'./pages/home.js': () => import('./pages/home.js'),
'./pages/about.js': () => import('./pages/about.js'),
})HTML 中的用法
注册模块后，请像平常一样定义 <page-route> 标签。路由器将拦截 src 字符串并使用预先注册的加载程序解析它，而不是触发通用浏览器获取请求：
html
<!-- Uses the registered bundler import loader automatically -->
<page-route path="/" src="./pages/home.js"></page-route>getRouteModule
通过其路径检索已注册的模块加载器。
typescript
function getRouteModule(path: string): ModuleLoader | undefined预加载注册模块
注册的模块可以在用户导航到它们之前预加载。
typescript
function preloadRouteModule(path: string): Promise<void>
function preloadRouteModules(paths: string[]): Promise<void>javascript
import { preloadRouteModules } from '@beforesemicolon/router'
await preloadRouteModules(['./pages/dashboard.js', './pages/settings.js'])