Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 898d61f

Browse files
authoredNov 20, 2024··
fix: route preload with Link tag (#12792)
* fix: route preload * chore: add ref to react code * docs: update
1 parent 7e0ebfd commit 898d61f

File tree

3 files changed

+11
-36
lines changed

3 files changed

+11
-36
lines changed
 

‎docs/docs/docs/api/api.en-US.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ function IndexPage({ user }) {
207207

208208
`<Link to>` supports relative path navigation; `<Link reloadDocument>` does not do routing navigation and is equivalent to the jump behavior of `<a href>`.
209209

210-
If `prefetch` is enabled, then when the user hovers over the component, Umi will automatically start preloading the component js files and data for the routing jump.
210+
If `prefetch` is enabled, then when the user hovers over the component, Umi will automatically start preloading the component js files and data for the routing jump. (Note: Use this feature when `routePrefetch` and `manifest` are enabled)
211211

212212
### matchPath
213213

‎docs/docs/docs/api/api.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ function IndexPage({ user }) {
206206

207207
`<Link to>` 支持相对路径跳转;`<Link reloadDocument>` 不做路由跳转,等同于 `<a href>` 的跳转行为。
208208

209-
若开启了 `prefetch` 则当用户将鼠标放到该组件上方时,Umi 就会自动开始进行跳转路由的组件 js 文件和数据预加载。
209+
若开启了 `prefetch` 则当用户将鼠标放到该组件上方时,Umi 就会自动开始进行跳转路由的组件 js 文件和数据预加载。(注:使用此功能请同时开启 `routePrefetch``manifest` 配置)
210210

211211
### matchPath
212212

‎packages/renderer-react/src/browser.tsx

+9-34
Original file line numberDiff line numberDiff line change
@@ -249,42 +249,17 @@ const getBrowser = (
249249
) || []
250250
).filter(Boolean);
251251
matchedRouteIds.forEach((id) => {
252-
// preload
253-
// @ts-ignore
254-
const manifest = window.__umi_manifest__;
255-
if (manifest) {
256-
const routeIdReplaced = id.replace(/[\/\-]/g, '_');
257-
const preloadId = `preload-${routeIdReplaced}.js`;
258-
if (!document.getElementById(preloadId)) {
259-
const keys = Object.keys(manifest).filter((k) =>
260-
k.startsWith(routeIdReplaced + '.'),
261-
);
262-
keys.forEach((key) => {
263-
if (!/\.(js|css)$/.test(key)) {
264-
throw Error(`preload not support ${key} file`);
265-
}
266-
let file = manifest[key];
267-
const link = document.createElement('link');
268-
link.rel = 'preload';
269-
link.as = 'style';
270-
if (key.endsWith('.js')) {
271-
link.as = 'script';
272-
link.id = preloadId;
273-
}
274-
// publicPath already in the manifest,
275-
// but if runtimePublicPath is true, we need to replace it
276-
if (opts.runtimePublicPath) {
277-
file = file.replace(
278-
new RegExp(`^${opts.publicPath}`),
279-
// @ts-ignore
280-
window.publicPath,
281-
);
282-
}
283-
link.href = file;
284-
document.head.appendChild(link);
285-
});
252+
// preload lazy component
253+
// window.__umi_manifest__ is available when routePrefetch and manifest config is enabled
254+
// __umi_manifest__ is not needed for preload, keep this is for compatibility and minimal change
255+
if ((window as any).__umi_manifest__) {
256+
// ref: https://github.com/facebook/react/blob/0940414/packages/react/src/ReactLazy.js#L135
257+
const lazyCtor = opts.routeComponents[id]?._payload?._result;
258+
if (typeof lazyCtor == 'function') {
259+
lazyCtor();
286260
}
287261
}
262+
288263
const clientLoader = opts.routes[id]?.clientLoader;
289264
const hasClientLoader = !!clientLoader;
290265
const hasServerLoader = opts.routes[id]?.hasServerLoader;

0 commit comments

Comments
 (0)
Please sign in to comment.