mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
1 line
7.3 KiB
JavaScript
1 line
7.3 KiB
JavaScript
|
(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["718ebd83"],{"718ebd83":function(e,t,n){"use strict";n.d(t,"__esModule",{value:!0}),n.d(t,"texts",{enumerable:!0,get:function(){return a;}}),n("29699130");let a=[{value:"For traditional js + css websites, SSR only needs to deal with the hydrate problem of the first rendering. With the introduction of CSS-in-JS technology, developers need to pay additional attention to how to export styles to HTML to ensure the correctness of the view. We provide a lot of implementation methods, and we just talk about the ideas here. If you need complete documentation or examples, please refer to ",paraId:0},{value:"Customize Theme",paraId:1},{value:".",paraId:0},{value:"The easiest way is to inline the styles directly into the HTML so that no extra requests. The disadvantage of this method is that the style cannot be cached by the browser and needs to be downloaded again for each request. Moreover, if there are too many styles, the HTML file will be too large, which will affect the speed of the first rendering.",paraId:2,tocIndex:0},{value:"In the v5 alpha version, in order to cover the SSR style rendering, we refer to the implementation of ",paraId:3,tocIndex:0},{value:"Emotion",paraId:3,tocIndex:0},{value:" and add the corresponding inline style before each element:",paraId:3,tocIndex:0},{value:'<div>\n <style>\n :where(.css-bAmBOo).ant-btn {\n // ...\n }\n </style>\n <button className="ant-btn css-bAmBOo">Hello World</button>\n</div>\n',paraId:4,tocIndex:0},{value:"This implementation is simple and effective, the only downside is style pollution for ",paraId:5,tocIndex:0},{value:":nth",paraId:5,tocIndex:0},{value:" selections. But considering that antd components rarely use this selector, the side effects can be ignored.",paraId:5,tocIndex:0},{value:"It worked well at the beginning, and the official website of antd directly supports the SSR style without modification and meet the SEO needs. But as our components gradually migrated to the CSS-in-JS version, we found that the site's bundle size became very large and slowly became unusable. After looking at the HTML, we found that the default inline method is not good, it will cause the style to be doubled inline, for example, if there are 3 Buttons in a page, then it will repeat the inline 3 times:",paraId:6,tocIndex:0},{value:'<div>\n <style>\n :where(.css-bAmBOo).ant-btn {\n // ...\n }\n </style>\n <button className="ant-btn css-bAmBOo">Hello World 1</button>\n <style>\n :where(.css-bAmBOo).ant-btn {\n // ...\n }\n </style>\n <button className="ant-btn css-bAmBOo">Hello World 2</button>\n <style>\n :where(.css-bAmBOo).ant-btn {\n // ...\n }\n </style>\n <button className="ant-btn css-bAmBOo">Hello World 3</button>\n</div>\n',paraId:7,tocIndex:0},{value:"And when most components are converted to CSS-in-JS, inline styles can become huge. So we removed the automatic inlining function in the later stage, and converted it to a form that needs to be collected manually:",paraId:8,tocIndex:0},{value:"import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';\nimport { renderToString } from 'react-dom/server';\n\nconst cache = createCache();\n\n// HTML Content\nconst html = renderToString(\n <StyleProvider cache={cache}>\n <MyApp />\n </StyleProvider>,\n);\n\n// Style Content\nconst styleText = extractStyle(cache);\n",paraId:9,tocIndex:0},{value:"This is the traditional CSS-in-JS injection implementation. As mentioned in the introduction, inline styles cannot be cached and cause additional loading overhead. Therefore, we try to explore some new implementation methods to obtain a loading experience like native CSS.",paraId:10,tocIndex:0},{value:"We are thinking about whether we can pre-bake the style of the component for front-end consumption like the v4 version, so we proposed ",paraId:11,tocIndex:1},{value:"[RFC] Static Extract style",paraId:11,tocIndex:1},{value:". Its id
|