在样式化组件中使用 `css` 函数会导致性能下降吗？答案

【问题标题】：Does using the `css` function inside a styled component cause a performance hit?在样式化组件中使用 `css` 函数会导致性能下降吗？
【发布时间】：2020-06-25 00:58:33
【问题描述】：

为了使用 Visual Studio Code 对样式化组件代码进行正确的代码完成、linting 和着色，我们一直使用 css 函数作为模板包装器。

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

import styled, { css } from 'styled-components/native';.

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

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

【问题讨论】：

我遇到了同样的问题，并且一直在尝试以各种无效的方式解决它。使用css 不是其中之一。谢谢你启发我:) 赞成！另外，我同意下面的答案。它可能会增加一些重量，但它的尺寸可能微不足道。
@TalKoren 结合使用css 和this answer on how to type styled components 几乎解决了我们所有的vscode 编辑器问题。

标签： css styled-components

【解决方案1】：

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

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

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

【讨论】：