Question

我有一个关于在React.js中导入文件的问题（创建反应应用程序）。

例如，我有两个组件 firstComponent.js 和 secondCmponent.js

在两个文件中，我使用CSS样式导入相同的文件：导入'some.css';

这是否意味着在构建应用程序后，我将使用 some.css x2 的代码？
如果我并排（同时）调用组件

示例：

<div>
    <FirstComponent />
    <SecondComponent />
</div>

在浏览器内存中， some.css 将 x2 ？

Answer 1

引擎盖下的create-react-app使用Webpack，它是一个模块捆绑器，可以将所有文件输出并输出到一个文件中，这样当您在许多地方使用文件时，例如 .css 文件webpack只会在输出文件中包含该文件＆gt;所以你不必担心。这也适用于其他资产，如图像，字体，js文件

了解有关webpack的更多信息

webpack tutorial

Answer 2

但为什么要两次包含同一个文件？为什么你不能将你的CSS分成三个文件：

Main.css（包含标准样式）
FirstComponent.css（包含FirstComponent.js的特定样式）
SecondComponent.css（包含SecondComponent.js的特定样式）

然后在你的文件中：

App.js

import './Main.css';
class App extends React.Component {
    render () {
        <div>
            <FirstComponent />
            <SecondComponent />
        </div>
    }
}

FirstComponent

import './FirstComponent.css';
class FirstComponent extends React.Component {}

SecondComponent

import './SecondComponent.css';
class SecondComponent extends React.Component {}

这不会像你一样给你双重文件导入。

弹出

的另一种用法

如果你不知道自己在做什么，请不要使用它。

你可以在webpack插件的帮助下，管理你的块，如果一个东西被导入了N次，它将被移动到commons.js文件，在webpack 4之前，这个叫做commonChunksPlugin，现在在webpack 4，我没有这个在脑子里，但我认为现在默认包含或多或少（需要来源）。

React - 文件导入

2 个答案:

App.js

FirstComponent

SecondComponent

弹出