docs: enable prefetch for dumi Link #315
Conversation
📝 WalkthroughWalkthrough本次变更涉及多个组件的更新，主要集中在链接组件的导入路径和渲染逻辑的修改。 Changes
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
|
Bundle ReportBundle size has no change ✅ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
.dumi/theme/common/Link.tsx (1)
14-24: 链接组件实现优雅，建议小幅优化组件的基本实现非常扎实，特别是对 ref 的转发处理。不过建议对 href 的计算逻辑做一些优化。
建议将 href 计算逻辑提取为独立函数：
+const getHref = (to: LinkProps['to'], pathname: string): string => { + if (typeof to === 'object') { + return `${to.pathname || pathname}${to.search || ''}${to.hash || ''}`; + } + return to; +}; const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>( ({ component, children, to, ...rest }, ref) => { const { pathname } = useLocation(); const { preloadRoute } = useAppData(); const navigate = useNavigate(); - const href = useMemo<string>(() => { - if (typeof to === 'object') { - return `${to.pathname || pathname}${to.search || ''}${to.hash || ''}`; - } - return to; - }, [to]); + const href = useMemo(() => getHref(to, pathname), [to, pathname]);.dumi/theme/builtins/DemoWrapper/index.tsx (1)
109-111: 异步加载处理优化添加 Suspense 包装很好地处理了 DumiDemoGrid 的异步加载，但建议添加 fallback 内容。
- <Suspense> + <Suspense fallback={<div className="demo-loading">加载中...</div>}> <DumiDemoGrid items={demos} /> </Suspense>.dumirc.ts (1)
14-14: 建议补充 manifest 配置的具体内容虽然空的 manifest 配置可以工作，但建议根据项目需求添加适当的配置，比如：
- 缓存策略
- 预加载规则
- 资源优先级
这样可以更好地优化资源加载性能。
- manifest: {}, + manifest: { + // 建议添加以下配置 + strategy: 'eager', // 或 'lazy' + basePath: '/', + publicPath: '/', + },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
bun.lockbis excluded by!**/bun.lockb
📒 Files selected for processing (8)
.dumi/pages/index/components/MainBanner.tsx(1 hunks).dumi/theme/builtins/ComponentOverview/index.tsx(1 hunks).dumi/theme/builtins/DemoWrapper/index.tsx(2 hunks).dumi/theme/builtins/LocaleLink/index.tsx(1 hunks).dumi/theme/common/Link.tsx(1 hunks).dumi/theme/slots/Footer/index.tsx(1 hunks).dumirc.ts(1 hunks)package.json(0 hunks)
💤 Files with no reviewable changes (1)
- package.json
🔇 Additional comments (8)
.dumi/theme/builtins/LocaleLink/index.tsx (1)
4-4: 导入路径修改符合预期！
将 Link 组件的导入从 dumi 包改为本地路径是合理的重构，与其他文件保持一致。
.dumi/theme/common/Link.tsx (2)
25-34: 点击事件处理逻辑完善
处理了 metaKey/ctrlKey/shiftKey 以支持新标签页打开，同时正确区分了内部和外部链接。
48-51: 预加载功能配置正确
通过 prefetch 属性启用了 DumiLink 的预加载功能，这将改善页面导航性能。
.dumi/theme/builtins/DemoWrapper/index.tsx (1)
3-3: 导入顺序调整合理
将 React 相关导入与第三方库导入分开排序，提高了代码的组织性。
Also applies to: 6-6
.dumi/theme/builtins/ComponentOverview/index.tsx (1)
246-248: 代码变更正确！
Link 组件的使用符合预期，移除了 prefetch 属性以便使用 dumi 的默认预加载行为。
.dumi/pages/index/components/MainBanner.tsx (1)
3-3: 导入路径更新正确！
将 Link 组件的导入从 dumi 更改为本地路径是合理的，与其他文件保持一致。
Also applies to: 9-9
.dumi/theme/slots/Footer/index.tsx (1)
18-18: 导入路径修改合适！
Link 组件的导入路径更新符合项目规范，确保了组件引用的一致性。
Also applies to: 25-25
.dumirc.ts (1)
11-15: 新增的路由预加载配置看起来不错！
通过添加 routePrefetch 配置启用了 dumi 的路由预加载功能，这将改善页面导航性能。空对象配置是有效的，因为它使用了 dumi 的默认预加载行为。
建议在文档中添加关于此功能的说明，以便其他开发者了解如何正确使用 <Link prefetch /> 组件。
让我们验证一下相关组件是否正确使用了这个新功能：
size-limit report 📦
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #315 +/- ##
=======================================
Coverage 91.36% 91.36%
=======================================
Files 66 66
Lines 1447 1447
Branches 368 383 +15
=======================================
Hits 1322 1322
Misses 125 125 ☔ View full report in Codecov by Sentry. |
Deploying ant-design-x with
|
| Latest commit: |
e8d6b01
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5b5b7d00.ant-design-x.pages.dev |
| Branch Preview URL: | https://docs-dumi-link-prefetch.ant-design-x.pages.dev |
搬一下 ant-design/ant-design#51922 和 ant-design/ant-design#51921
Summary by CodeRabbit
发布说明
新功能
Bug 修复
文档
样式
依赖管理
nprogress的依赖，简化了项目依赖树。