ant-design / cssinjs

https://ant-design.github.io/cssinjs
MIT License
235 stars 57 forks source link

fix: ssrInline duplicate style #175

Open hixuanxuan opened 4 months ago

hixuanxuan commented 4 months ago

问题

在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-commenter commented 4 months ago

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 ```diff @@ 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.