css - 在带样式的组件中使用 `css` 函数是否会导致性能下降?

标签 css styled-components

为了使用 Visual Studio Code 对样式组件代码进行适当的代码完成、检查和着色,我们一直在使用 css 函数作为模板包装器。

这是一个例子。注意蓝色的 css 函数。

从'styled-components/native'导入样式,{css};

enter image description here

如果没有 css 函数,所有的 css 代码都只是绿色文本,没有任何编辑器智能。

这对性能有影响吗? 我们是否最好放弃代码编辑器的便利并使用简单的模板文字?

最佳答案

来自 styled-components 的样式定义在构建时作为纯 CSS 被解析并提取到 index.html 文件头部的标签中。

因此,您的 html 文件可能会变大,但要显着降低性能,您需要大量的样式。到那时,您可能只考虑重构。

我的两分钱,如果它对您有用并且您选择的工具不会引入威胁您应用程序生命力的新错误和/或性能问题,请坚持使用它,直到您发现需要更改它为止。

关于css - 在带样式的组件中使用 `css` 函数是否会导致性能下降?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60663197/

相关文章:

javascript - 如何在普通 JavaScript 中切换多个类?

javascript - 样式化组件未包装另一个样式化组件

javascript - 将样式化组件作为类名传递给另一个组件

css - 在 React 中对所有大小值使用 pixels-to-rem 函数(使用样式化组件)是否是一种常见的约定?

jquery - 只需要显示 4 个列表 - slideDown jquery

css - Magento 在 CSS 路径中加倍了基本 url

reactjs - 我如何使用带有动态导入的样式组件

css - 左侧带有文本的语义 react /按钮

html - 将 div 的高度匹配到完整的滚动条高度

javascript - 我试图按类和标题选择 div 元素