如何防止未使用的 React 组件的样式标签

Question

我认为这个问题可能会扩展到 React 之外，但我仍然不确定 React 本身是否对问题负责。

环境是 React with TypeScript。 我在组件文件中使用 CSS 导入，因此每个组件都有其特定的样式表，并且我假设在实例化相应组件之前不会将这些样式添加到<head>元素。 但事实证明，如果我从一个文件中导入一个组件，它只是重新导出所有组件，我不使用的所有其他组件的样式仍然添加到 DOM 中。

这是一个简单的例子，假设我在lib文件夹中有两个简单的组件 - Avatar和Button 。 它们看起来像这样（ Button类似）：

import React from 'react';

import './avatar.css';

const Avatar: React.FC = (props: any) => {
  return (
    <div className="avatar">
      {props.children}
    </div>
  );
}
export { Avatar };

然后我添加index.ts来index.ts组件，以获得简单的导入路径：

import { Avatar } from './Avatar';
import { Button } from './Button';

export { Avatar, Button };

最后，在我的AppComponent我只想使用Button组件：

import React from 'react';
import { Button } from './lib';

const App: React.FC = () => {
  return (
    <div className="App">
          <Button>example</Button>      
    </div >
  );
}

export default App;

令我惊讶的是，在<head>元素中有<style>标签不仅用于Button ，还用于Avatar 。 为什么会这样？ 我的再导出配置有问题吗？

请注意，如果我直接从其文件中导入组件 - import { Button } from './lib/Button'我不会获得Avatar样式。

这个例子真的很简单，但真正的场景是与一个 React 组件库相关的，它包含了很多带有很多样式表的组件。 我想避免在 DOM 中插入如此多的<style>标签，除非确实需要它们。

感谢您花时间在这上面！

Answer 1

以便每个组件都有其特定的样式表，并且我认为在实例化相应的组件之前不会将这些样式添加到元素中

这个假设是错误的。 React 使用 webpack 来捆绑它的文件，而 webpack 处理 CSS 导入的方式是加载项目依赖的所有 CSS 文件，并在开始时将它们放在<head>元素中。

你可能会问：那我如何保持我的风格分开而不是混合在一起。
解决这个问题有3种方法

一个好方法是添加一个 CSS 模块样式表
另一个建议是让包裹你的组件的<div>有一个与组件同名的className ，这样你的组件就会看起来像这样

export default class ComponentOne extends Component {
...
  render() {
    return(
      <div className="ComponentOne">
        ...
      </div
    )
  }
}

您的组件 CSS 文件将如下所示：

.ComponentOne div img {
  ...
}
.ComponentOne .class-one {
 ...
}

通过这种方式，使用像 SASS 这样的 CSS 预处理器会派上用场，所以你的 .scss 文件将简单地以：

.ComponentOne {
  ...
}

另一种解决方案是将样式作为组件内的对象。 这样，样式将仅作用于您的组件，并会在组件卸载时删除，但是您将无法轻松创建@media queries和other special effects like :hover` 并且不建议将这种方法用于小组件经常挂载和卸载，因为一旦应用程序变大，这就会产生性能问题

您可能还会问：既然所有样式表都是在乞讨时导入的，那我为什么不将所有样式放在一个大样式表中而不是将它们拆分。

除了拆分样式将使它们易于处理以便每个组件都有其单独的 CSS 文件并且 webpack 将处理导入它们这一事实之外，还有另一个好处：
假设您有一个feature1 组件，它也有一个feature1.css文件。 一开始，当您在主应用程序中导入了 feature1 时，webpack 也会导入其样式表并将其放入<head>元素中。
但是假设将来您决定不再使用feature1 组件，并且您现在正在使用另一个具有自己的feature2.css文件的feature2 组件。 现在因为没有其他组件正在导入feature1 组件，webpack 也会忽略将feature1.css导入到<head>元素中。

如何防止未使用的 React 组件的样式标签

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-08-28 14:32:16

如何防止未使用的 React 组件的样式标签

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-08-28 14:32:16

解决方案1
2 已采纳 2020-08-28 14:32:16