在 React 项目中，我们通常使用 CSS-in-JS 的方式来管理组件的样式，其中最流行的库莫过于 styled-components 了。但是，由于 styled-components 生产出来的 CSS 样式是 inline 的，会产生一些性能问题。那么如何优化这个问题呢？我们可以借助 Babel 的插件对 styled-components 进行处理。
styled-components 的性能问题
styled-components 默认会把生成的 CSS 样式嵌入到每个组件创建的标签内，导致每次组件渲染时都要进行样式注入，从而降低渲染效率。
举个例子，假设我们有两个同样的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------
----- ------ - --------------
-------- ---- -----
----------------- -----
------ -----
-------------- ----
------- -----
--
------ ------- -------- ----- -
------ -
-----
------------- ------------
------------- ------------
------
--
-利用 Chrome 开发者工具的 Performance 面板可以看到，页面每次渲染都会重复生成一遍样式。
这个问题还会随着项目规模的增大而愈发明显。
利用 Babel 优化
因此，我们需要想办法把样式提取出来，然后在全局中引用，从而减少重复的样式生成。这里介绍一种基于 Babel 的解决方案。
我们可以使用 Babel 插件来替换掉 styled-components 的默认行为，在组件渲染时注入统一的 CSS 类名。这样，我们就可以把样式提取到全局了，并避免了无谓的样式注入。
下面是具体的实现步骤。
安装依赖
首先，我们需要安装两个必要的依赖：
npm install --save-dev babel-plugin-styled-components style-loader css-loader
其中，babel-plugin-styled-components 是我们要用到的 Babel 插件，style-loader 和 css-loader 则是处理样式文件的 Webpack loader。
配置 Babel 插件
在 Babel 配置文件 .babelrc 中添加插件，同时把 styled-components 换成 @emotion/styled，因为 @emotion/styled 的性能优化更好。
-- -------------------- ---- -------
-
---------- -
-
---------------------------------
-
----------- ------
-------------- ------
--------- -----
---------------------------- -----
------- ----
-
-
-
-修改 Webpack 配置
在 Webpack 配置文件中添加 style-loader 和 css-loader：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
---- ---------------- --------------
--
--
--
--组件中使用全局样式
重新编写组件，使用全局样式。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------
----- ----- - ----------
------ ----
--
----- ------ - --------------
-------- ---- -----
----------------- -----
------ -----
-------------- ----
------- -----
--
-- ----
------ --------------
------ ------- -------- ----- -
------ -
-----
--------------------
------- ------------------------------- ------------
------- ------------------------------- ------------
------
--
-注意到这里我们添加了一个名为 custom-button 的 CSS 类名，用于对应全局样式。
编写全局样式
在项目根目录下创建一个名为 index.css 的文件，添加样式：
.custom-button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border-radius: 5px;
border: none;
}运行项目
重新运行项目，可以看到 Chrome 开发者工具的 Performance 面板中，每个组件只会生成一遍样式。
这里我们可以看到，优化后的性能表现有了很大的提升。
结论
本文介绍了如何借助 Babel 优化 React 项目中的 CSS-in-JS。我们利用 Babel 插件对 styled-components 进行处理，使得组件在渲染时只需要添加注入一个统一的 CSS 类名，而不是每次都生成一遍重复的样式。这样，我们就可以把样式提取到全局，并避免了无谓的样式注入，从而显著提升组件渲染的性能。
如果你也在处理类似的性能问题，不妨试试这个方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672f0485eedcc8a97c8c04b7