有没有更好的方法来优化我的 Next.js 项目的 CSS？

如何解决有没有更好的方法来优化我的 Next.js 项目的 CSS？

我目前正在使用 Next.js 处理该项目，在 JS 中使用 CSS (ReactJSS) 进行样式设置。

当我查看页面源代码时，我在单个页面中有超过 4000 行 css，这被认为对性能来说不是很好。为了解释得足够好，假设我在我的 Post details 页面中使用了 Typography 组件，该页面具有如下所示的 className 的 html。

<p className={classes.textClass}>Typography</p>

我已经为 textClass 编写了一些 css（您可以在下面的页面源代码中看到），显然，我一直在传递来自 Post Details 页面的 props 来设置排版样式。我一直在使用 Typography 组件 157 次（它真的是一个巨大的页面）并且由于 js 中的 css，我得到了 157 个唯一的 .textClass（因为使用 ReactJSS 的唯一选择器）这是太丑了，当我查看页面源时。参见页面源码中重复css的例子。

            .textClass-d3-0-2-73 {
              white-space: unset;
              margin-bottom: 0px;
              color: #0c0c0c;
              cursor: pointer;
              font-family: Roboto,'Noto Sans JP';
              text-transform: none;
              text-decoration-line: none;
              padding: 0px;
              font-weight: normal;
              letter-spacing: 0px;
              font-size: 12px;
              line-height: 12px;
            }

            .textClass-d4-0-2-74 {
              white-space: unset;
              margin-bottom: 0px;
              color: #0c0c0c;
              cursor: pointer;
              font-family: Roboto,'Noto Sans JP';
              text-transform: none;
              text-decoration-line: none;
              padding: 0px;
              font-weight: normal;
              letter-spacing: 0px;
              font-size: 12px;
              line-height: 12px;
            }

我尝试使用 PostCSS，但没有任何改进，而只是扭曲了事先很好的设计。

所以我正在寻找更好的技术来优化 css，并提高性能。我没有办法在 JS 中摆脱 CSS，但我需要优化坐在同一点！

我们有什么技术可以清除或优化使用 ReactJSS 完成的 css 吗？

解决方法

由于您没有发布如何描述样式的代码示例，我假设您使用带有函数值的钩子接口，如下所示：

const useStyles = createUseStyles({
  textClass: (props) => ({
    whiteSpace: props.x ? 'unset' : 'somethingElse',marginBottom: props.y ? 0 : 10,})
})

const Typography = (props) => {
  const classes = useStyles(props)
  return <p className={classes.textClass}>...</p>
}

在页面上多次使用的组件中使用函数规则或值的问题是难以优化。

每个 React 组件实例可能会传递不同的 props 对象，并且页面上每个元素的样式都可以不同。

在这种情况下，我建议完全避免函数值/规则。尽可能使用 ThemeProvider 的主题。

const useStyles = createUseStyles((theme) => ({
  textClass: {
    whiteSpace: theme.whiteSpace,marginBottom: theme.spacing,}
}))

const Typography = (props) => {
  const classes = useStyles(props)
  return <p className={classes.textClass}>...</p>
}


React.render(
  <ThemeProvider theme={theme}>
    <Typography />
  </ThemeProvider>,root
)

如果需要依赖于 props 的样式，从多个单独的规则中构建你需要的类名：

const useStyles = createUseStyles((theme) => ({
  h1: {
    whiteSpace: theme.h1.whiteSpace,marginBottom: theme.h1.spacing,},h2: {
    whiteSpace: theme.h2.whiteSpace,marginBottom: theme.h2.spacing,}
}))

const Typography = (props) => {
  const classes = useStyles(props)
  return <p className={classes[props.variant]}>...</p>
}


React.render(
  <ThemeProvider theme={theme}>
    <Typography variant="h1"/>
  </ThemeProvider>,root
)

按照我的建议进行操作时，CSS 的输出将完全符合您的预期。