样式组件 createGlobalStyle 为整个网站有效负载添加 10mb nextjs

Question

我的字体是200kb。

当我这样做时，我的整个 nextjs 网站会增加 10MB。这是怎么回事。

import { createGlobalStyle } from 'styled-components';

import myfont from './fonts/my-font.ttf';

export const GlobalStyle = createGlobalStyle`
    @font-face {
        font-family: 'My Font';
        src: url(${myfont}) format("truetype");
        font-style: normal; 
    }
`;

然后我们将它与 rollup 以及一堆其他组件捆绑在一起。

但是当我们这样做时

import { GlobalStyle } from 'component-lib/components';

export const ClientLayout = function () {
  return <GlobalStyle />;
};

它增加了 10 mb 的有效负载？这是怎么回事。

Answer 1

目前，我遇到了非常类似的问题。 就我而言，

1. 我网站的整个代码中有两个

   <GlobalStyle>

   。
2. 其中一个使用

   @font-face

   就像你一样。

所以，我猜，这是因为你可能有 2 个或更多

<GlobalStyle>

，其中一个使用

@font-face

。 我不太确定哪一个导致了问题（或者可能两者都导致了问题）。

我的情况的症状是不断重复创建和删除相同的捆绑样式组件

style

标签。因此，客户端（浏览器）不断重复请求相同的字体，导致页面闪烁，整个网页的实际字体样式不断变化（因此页面和文本的样式和大小[布局]不断变化，导致页面和字体好像每秒“心跳”10 次。）

我猜测，问题的原因是由于

createGlobalStyle

代码中的这两部分造成的。 （https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/createGlobalStyle.ts）

const ssc = useStyleSheetContext();
const theme = React.useContext(ThemeContext);
const instanceRef = React.useRef(ssc.styleSheet.allocateGSInstance(styledComponentId));

const instance = instanceRef.current;

if (!__SERVER__) {
  React.useLayoutEffect(() => {
    if (!ssc.styleSheet.server) {
      renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
      return () => globalStyle.removeStyles(instance, ssc.styleSheet);
    }
  }, [instance, props, ssc.styleSheet, theme, ssc.stylis]);
}

在我们的例子中，似乎

instance

或

props

或

ssc.styleSheet

不断变化，导致不断重复创建和删除捆绑样式的组件样式标签。在您的情况下，导致有效负载的大小膨胀，在我的情况下，导致闪烁和字体不断变化（由于对相同字体的重复请求。

作为症状参考，这是我的代码。

_app.tsx

  <StyledComponentsRegistry
    showCondition={isGoogleFontsLoadedState || !!getIsSlowConnection()}
  >
    {PreloadedFontFace}
    <Styles.GlobalStyle
      isFirstRender={isFirstRender}
      screenWidth={stateScreenWidth}
      screenHeight={stateScreenHeight}
      screenAspectRatio={stateScreenAspectRatio}
      clientWidth={stateClientWidth}
      clientHeight={stateClientHeight}
      clientAspectRatio={stateClientAspectRatio}
    />
    <Component {...pageProps} />
  </StyledComponentsRegistry>

useSameOriginGoogleFonts.tsx

export const PreloadedFontFace = createGlobalStyle<{
  fontList: Font[];
}>`
${({ fontList }) =>
fontList.map(
  (font) => `@font-face {
    font-family: "${font.family}";
    src: ${font.source};
    ${
      font.descriptors?.weight
        ? `font-weight: "${font.descriptors?.weight}";`
        : ""
    }
  }`
)}
`;