single-spa源码分析之按需加载

源码相关

与 activeWhen 相关

activeWhen API 可以控制页面是否需要加载

以下片段是源码及注释

// \single-spa-source-code\src\applications :447
/*** 得到一个函数，函数负责判断浏览器当前地址是否和用户给定的baseURL相匹配，匹配返回true，否则返回false*/
function sanitizeActiveWhen(activeWhen) {// activeWhen 接收一个函数（箭头函数），将location传入 (location) => location.hash.startsWith('#/app1'); 调用后返回一个字符串// location.hash：hash属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）// startsWith() 方法用于检测字符串是否以指定的前缀开始let activeWhenArray = Array.isArray(activeWhen) ? activeWhen : [activeWhen];// 保证数组中每个元素都是一个函数activeWhenArray = activeWhenArray.map((activeWhenOrPath) =>typeof activeWhenOrPath === "function"? activeWhenOrPath: // activeWhen如果是一个路径，则保证成一个函数pathToActiveWhen(activeWhenOrPath));// 返回一个函数，函数返回一个 boolean 值return (location) =>activeWhenArray.some((activeWhen) => activeWhen(location)); // 调用用户配置的函数，传入location
}// activeWhen传入的不是函数，而是字符串或者数组，则特殊处理
// '/app1', '/users/:userId/profile', '/pathname/#/hash' ['/pathname/#/hash', '/app1']
// 具体见官方文档api，有详细说明：https://zh-hans.single-spa.js.org/docs/api
export function pathToActiveWhen(path, exactMatch) {// 根据用户提供的baseURL，生成正则表达式const regex = toDynamicPathValidatorRegex(path, exactMatch);// 函数返回boolean值，判断当前路由是否匹配用户给定的路径return (location) => {// compatible with IE10let origin = location.origin;if (!origin) {origin = `${location.protocol}//${location.host}`;}const route = location.href.replace(origin, "").replace(location.search, "").split("?")[0];return regex.test(route);};
}

sanitizeActiveWhen与pathToActiveWhen是两个关键方法，控制是否需要按需加载 app.js，像我目前项目中写的一般都是(location) => true，也就是默认加载所有 app.js，优化点在于activeWhen函数，能够实现按需加载（根据路径加载）。

single-spa提供了两种挂载方式，分为简单参数和对象参数。（具体见官方文档 api，有详细说明：https://zh-hans.single-spa.js.org/docs/api）

简单参数

singleSpa.registerApplication("appName",() => System.import("appName"),(location) => location.pathname.startsWith("appName")
);

对象参数

singleSpa.registerApplication({name: 'appName',app: () => System.import('appName'),activeWhen: '/appName'customProps: {}
})

二者区别在于如果选择对象参数时，需要走一层转换pathToActiveWhen函数，另外activeWhen属性也可以传递数组，一个数组中任何条件为真，则保留应用活动。如activeWhen:['/authority', '/test'],访问例如http://localhost:7000/test,http://localhost:7000/test,都能激活应用。作者在源码中也有相应的逻辑，let activeWhenArray = Array.isArray(activeWhen) ? activeWhen : [activeWhen];

https://zh-hans.single-spa.js.org/docs/api/#pathtoactivewhen,文档中详细介绍了pathToActiveWhen的例子。

single-spa规定我们使用按需时传入的格式，具体根据项目情况而定

如采用 Hash 模式：

(location) => location.hash.startsWith("#/app1");

如采用 history 模式：

(location) => location.pathname.startsWith("app1");

若是当前浏览器 URL 与#/app1相匹配时（假定使用的是 hash），
single-spa 调用sanitizeActiveWhen方法时，接收activeWhen参数，在\single-spa-source-code\src\applications :434 做了一层校验validateRegisterWithConfig(appNameOrConfig);,注意看validateRegisterWithConfig函数，其中allowsStringAndFunction箭头函数，规范和保证了activeWhen必须是字符串，或者函数或者数组。

export function validateRegisterWithConfig(config) {// 1. 异常判断，应用的配置对象不能是数组或者nullif (Array.isArray(config) || config === null)throw Error(formatErrorMessage(39,__DEV__ && "Configuration object can't be an Array or null!"));// 2. 应用配置必须是指定的几个关键字const validKeys = ["name", "app", "activeWhen", "customProps"];// 过滤函数，将不是 validKeys 中的key，过滤出来。const invalidKeys = Object.keys(config).reduce((invalidKeys, prop) =>validKeys.indexOf(prop) >= 0 ? invalidKeys : invalidKeys.concat(prop),[]);// 如果存在无效的key，则抛出一个错误,表示书写不合法if (invalidKeys.length !== 0)throw Error(formatErrorMessage(38,__DEV__ &&// 配置对象只接受 validKeys 中的属性，其他的无效`The configuration object accepts only: ${validKeys.join(", ")}. Invalid keys: ${invalidKeys.join(", ")}.`,validKeys.join(", "),invalidKeys.join(", ")));// 3. 应用名称存在校验if (typeof config.name !== "string" || config.name.length === 0)throw Error(formatErrorMessage(20,__DEV__ &&// 应用名称必须存在，且不能是空字符串"The config.name on registerApplication must be a non-empty string"));// app 属性只能是一个对象或者函数// 对象是一个已被解析过的对象，是一个包含各个生命周期的对象；// 加载函数必须返回一个 promise// 以上信息在官方文档中有提到：https://zh-hans.single-spa.js.org/docs/configurationif (typeof config.app !== "object" && typeof config.app !== "function")throw Error(formatErrorMessage(20,__DEV__ &&"The config.app on registerApplication must be an application or a loading function"));// 第三个参数，可以是一个字符串，也可以是一个函数，也可以是两者组成的一个数组，表示当前应该被激活的应用的baseURLconst allowsStringAndFunction = (activeWhen) =>typeof activeWhen === "string" || typeof activeWhen === "function";if (!allowsStringAndFunction(config.activeWhen) &&!(Array.isArray(config.activeWhen) &&config.activeWhen.every(allowsStringAndFunction)))throw Error(formatErrorMessage(24,__DEV__ &&// activeWhen 必须是字符串，或者函数或者数组"The config.activeWhen on registerApplication must be a string, function or an array with both"));// 5. 自定义属性校验， 必须是一个对象if (!validCustomProps(config.customProps))throw Error(formatErrorMessage(22,// customProps 必须是对象，不能是函数或者数组，也不能为空__DEV__ && "The optional config.customProps must be an object"));
}