docs: performance enhance (#43705)

* docs: performance enhance * chore: update snapshot
ant-design · Jul 21, 2023 · cbf2703 · cbf2703
1 parent ab8e10d
commit cbf2703
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 14 deletions.
diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx
@@ -199,6 +199,8 @@ const Footer: React.FC = () => {
           icon: (
             <img
               src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
+              width={16}
+              height={16}
               alt="yuque"
             />
           ),
@@ -222,6 +224,8 @@ const Footer: React.FC = () => {
           icon: (
             <img
               src="https://gw.alipayobjects.com/zos/rmsportal/mZBWtboYbnMkTBaRIuWQ.png"
+              width={16}
+              height={16}
               alt="seeconf"
             />
           ),
@@ -303,6 +307,8 @@ const Footer: React.FC = () => {
       icon: (
         <img
           src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
+          width={22}
+          height={22}
           alt="Ant XTech"
         />
       ),
@@ -312,6 +318,8 @@ const Footer: React.FC = () => {
           icon: (
             <img
               src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
+              width={16}
+              height={16}
               alt="yuque"
             />
           ),
@@ -324,6 +332,8 @@ const Footer: React.FC = () => {
           icon: (
             <img
               src="https://gw.alipayobjects.com/zos/antfincdn/nc7Fc0XBg5/8a6844f5-a6ed-4630-9177-4fa5d0b7dd47.png"
+              width={16}
+              height={16}
               alt="AntV"
             />
           ),
@@ -333,7 +343,7 @@ const Footer: React.FC = () => {
           openExternal: true,
         },
         {
-          icon: <img src="https://www.eggjs.org/logo.svg" alt="Egg" />,
+          icon: <img src="https://www.eggjs.org/logo.svg" alt="Egg" width={16} height={16} />,
           title: 'Egg',
           url: 'https://eggjs.org',
           description: <FormattedMessage id="app.footer.egg.slogan" />,
@@ -343,6 +353,8 @@ const Footer: React.FC = () => {
           icon: (
             <img
               src="https://gw.alipayobjects.com/zos/rmsportal/DMDOlAUhmktLyEODCMBR.ico"
+              width={16}
+              height={16}
               alt="kitchen"
             />
           ),
@@ -355,6 +367,8 @@ const Footer: React.FC = () => {
           icon: (
             <img
               src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
+              width={16}
+              height={16}
               alt="xtech"
             />
           ),

diff --git a/.dumi/theme/slots/Header/Logo.tsx b/.dumi/theme/slots/Header/Logo.tsx
@@ -54,7 +54,12 @@ const Logo: React.FC<LogoProps> = ({ isZhCN }) => {
   return (
     <h1>
       <Link to={utils.getLocalizedPathname('/', isZhCN, search)} className={styles.logo}>
-        <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="logo" />
+        <img
+          src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+          height={32}
+          width={32}
+          alt="logo"
+        />
         <span className={styles.title}>Ant Design</span>
       </Link>
     </h1>

diff --git a/.dumirc.ts b/.dumirc.ts
@@ -40,6 +40,64 @@ export default defineConfig({
   analytics: {
     ga_v2: 'UA-72788897-1',
   },
+  links: [
+    {
+      rel: 'preload',
+      as: 'font',
+      href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff2',
+      type: 'font/woff2',
+      crossorigin: true,
+    },
+    {
+      rel: 'preload',
+      as: 'font',
+      href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff',
+      type: 'font/woff',
+      crossorigin: true,
+    },
+    {
+      rel: 'preload',
+      as: 'font',
+      href: '//at.alicdn.com/t/webfont_6e11e43nfj.ttf',
+      type: 'font/ttf',
+      crossorigin: true,
+    },
+    {
+      rel: 'preload',
+      as: 'font',
+      href: '//at.alicdn.com/t/webfont_exesdog9toj.woff2',
+      type: 'font/woff2',
+      crossorigin: true,
+    },
+    {
+      rel: 'preload',
+      as: 'font',
+      href: '//at.alicdn.com/t/webfont_exesdog9toj.woff',
+      type: 'font/woff',
+      crossorigin: true,
+    },
+    {
+      rel: 'preload',
+      as: 'font',
+      href: '//at.alicdn.com/t/webfont_exesdog9toj.ttf',
+      type: 'font/ttf',
+      crossorigin: true,
+    },
+    {
+      rel: 'preload',
+      as: 'font',
+      href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2',
+      type: 'font/woff2',
+      crossorigin: true,
+    },
+    {
+      rel: 'preload',
+      as: 'font',
+      href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff',
+      type: 'font/woff2',
+      crossorigin: true,
+    },
+  ],
   headScripts: [
     `
     (function () {

diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
@@ -88,7 +88,7 @@ It accepts all props which native buttons support.
 
 Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#api) to set `autoInsertSpaceInButton` as `false`.
 
-<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="Button with two Chinese characters" />
+<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" width="100px" height="64px" style="box-shadow: none; margin: 0;" alt="Button with two Chinese characters" />
 
 <style>
 .site-button-ghost-wrapper {

diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
@@ -93,7 +93,7 @@ group:
 
 根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider-cn#api) 的 `autoInsertSpaceInButton` 为 `false`。
 
-<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格"  />
+<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0" width="100px" height="64px" alt="移除两个汉字之间的空格"  />
 
 <style>
 .site-button-ghost-wrapper {

diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -483,7 +483,7 @@ exports[`renders components/tabs/demo/card.tsx extend context correctly 1`] = `
 
 exports[`renders components/tabs/demo/card-top.tsx extend context correctly 1`] = `
 <div
-  class="css-1g7foe3"
+  class="acss-1g7foe3"
 >
   <div
     class="ant-tabs ant-tabs-top ant-tabs-card"

diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
@@ -408,7 +408,7 @@ exports[`renders components/tabs/demo/card.tsx correctly 1`] = `
 
 exports[`renders components/tabs/demo/card-top.tsx correctly 1`] = `
 <div
-  class="css-1g7foe3"
+  class="acss-1g7foe3"
 >
   <div
     class="ant-tabs ant-tabs-top ant-tabs-card"

diff --git a/components/tabs/demo/card-top.tsx b/components/tabs/demo/card-top.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { Tabs, theme } from 'antd';
-import { css } from '@emotion/css';
+import { Tabs } from 'antd';
+import { createStyles } from 'antd-style';
 
-const useStyle = () => {
-  const { token } = theme.useToken();
+const useStyle = createStyles(({ token, css }) => {
   const antdTabsCls = '.ant-tabs';
 
   return css`
@@ -32,7 +31,7 @@ const useStyle = () => {
       }
     }
   `;
-};
+});
 
 const items = new Array(3).fill(null).map((_, i) => {
   const id = String(i + 1);
@@ -50,10 +49,10 @@ const items = new Array(3).fill(null).map((_, i) => {
 });
 
 const App = () => {
-  const style = useStyle();
+  const { styles } = useStyle();
 
   return (
-    <div className={style}>
+    <div className={styles}>
       <Tabs type="card" items={items} />
     </div>
   );

diff --git a/tests/shared/imageTest.tsx b/tests/shared/imageTest.tsx
@@ -39,7 +39,7 @@ export default function imageTest(component: React.ReactElement) {
     page.on('request', onRequestHandle);
     await page.goto(`file://${process.cwd()}/tests/index.html`);
     await page.addStyleTag({ path: `${process.cwd()}/dist/reset.css` });
-    await page.addStyleTag({content: '*{animation: none!important;}'})
+    await page.addStyleTag({ content: '*{animation: none!important;}' });
 
     const cache = createCache();