cssinjs
cssinjs copied to clipboard
fix: ssrInline duplicate style
问题
在SSR场景ssrInine={true}导致重复的组件样式会被多次抽取打进html,导致文档的体积增大,nextjs里面无法直接使用rendertostring/renderToNodeStream
解决
利用记录次数,在服务端对于在cache中相同key对应的样式,只插入文档一次,并且利用react生命周期传递cache对象,不能使用defaultCache(次数是node的全局累计)
使用
'use client';
import {StyleProvider, createCache, legacyLogicalPropertiesTransformer} from '@ant-design/cssinjs';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import {ConfigProvider, App} from 'antd';
import zhCN from 'antd/locale/zh_CN';
import {antdTheme} from '@/lib/antd/antdTheme';
dayjs.locale('zh-cn');
export default function AntdProvider({children}: {
children: React.ReactNode;
}) {
const render = <>{children}</>;
const cache = createCache();
return (
<StyleProvider
ssrInline={true}
hashPriority="high"
cache={cache}
transformers={[legacyLogicalPropertiesTransformer]}
>
<ConfigProvider
locale={zhCN}
theme={antdTheme}
>
<App className="h-full">
{render}
</App>
</ConfigProvider>
</StyleProvider>
);
}
Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:
Project coverage is 94.88%. Comparing base (
907a22b) to head (594a29c).
:exclamation: Current head 594a29c differs from pull request most recent head d2c6e42. Consider uploading reports for the commit d2c6e42 to get more accurate results
Additional details and impacted files
@@ Coverage Diff @@
## master #175 +/- ##
==========================================
+ Coverage 94.80% 94.88% +0.07%
==========================================
Files 29 29
Lines 2619 2620 +1
Branches 394 396 +2
==========================================
+ Hits 2483 2486 +3
+ Misses 136 134 -2
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.