摘要
- react & react-dom 版本：
19.0.0-rc-3563387fe3-20240621 - node 版本：
20.14.0
当使用 react 的 preload 方法时，在某些情况下不会创建 preload link 标签。它与两个 link 标签(OnlyLinkTags 组件)一起工作正常。
代码示例
const fs = require('node:fs');
const { createElement } = require('react');
const { preload, preinit } = require('react-dom');
const { renderToString } = require('react-dom/server');
const CSS = '/some.css';
const LINK_PROPS = {
rel: 'stylesheet',
href: CSS,
};
/**
* Doesn't create the preload link tag
*/
const PreloadAndPreinit = () => {
preload(CSS, { as: 'style' });
preinit(CSS, { as: 'style' });
return null;
};
/**
* Doesn't create the preload link tag
*/
const PreloadAndLinkWithPrecedence = () => {
preload(CSS, { as: 'style' });
return createElement('link', { ...LINK_PROPS, precedence: 'custom' });
};
/**
* Creates the preload link tag correctly into the head
* The stylesheet link tag stays in the body, because it doesn't have precedence
*/
const PreloadAndLinkWithoutPrecedence = () => {
preload(CSS, { as: 'style' });
return createElement('link', LINK_PROPS);
};
/**
* Moves both tags into the head
*/
const OnlyLinkTags = () => [
createElement('link', {
key: 'preload',
rel: 'preload',
as: 'style',
href: CSS,
}),
createElement('link', { ...LINK_PROPS, key: 'link', precedence: 'custom' }),
];
[
PreloadAndPreinit,
PreloadAndLinkWithPrecedence,
PreloadAndLinkWithoutPrecedence,
OnlyLinkTags,
].forEach((Component) => {
fs.writeFileSync(
`_${Component.name}.html`,
renderToString(
createElement(
'html',
null,
createElement('head'),
createElement('body', null, createElement(Component)),
),
),
);
});输出：
PreloadAndPreinit:
当前：
<html>
<head>
<link rel="stylesheet" href="/some.css" data-precedence="default" />
</head>
<body></body>
</html>预期：
<html>
<head>
<link rel="stylesheet" href="/some.css" data-precedence="default" />
<link rel="preload" as="style" href="/some.css" />
</head>
<body></body>
</html>PreloadAndLinkWithPrecedence:
当前：
<html>
<head>
<link rel="stylesheet" href="/some.css" data-precedence="custom" />
</head>
<body></body>
</html>预期：
<html>
<head>
<link rel="stylesheet" href="/some.css" data-precedence="default" />
<link rel="preload" as="style" href="/some.css" />
</head>
<body></body>
</html>PreloadAndLinkWithoutPrecedence:
当前：
<html>
<head>
<link rel="preload" href="/some.css" as="style" />
</head>
<body>
<link rel="stylesheet" href="/some.css" />
</body>
</html>预期：
The same as current.
OnlyLinkTags:
当前：
<html>
<head>
<link rel="stylesheet" href="/some.css" data-precedence="custom" />
<link rel="preload" as="style" href="/some.css" />
</head>
<body></body>
</html>预期：
The same as current.
2条答案
按热度按时间9w11ddsr1#
感谢您提供详细信息。您能否包括每个案例的预期行为？从表面上看，不清楚哪些案例按预期工作，哪些没有。
mrwjdhj32#
感谢您提供的详细信息。您能包括每个案例的预期行为吗？从表面上看，不清楚哪些案例按预期工作，哪些没有。
已添加预期行为！😃