React - 文件导入答案

【问题标题】：React - files importReact - 文件导入
【发布时间】：2018-11-10 04:03:08
【问题描述】：

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

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

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

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

示例：

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

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

【问题讨论】：

我认为 webpack 将所有内容巧妙地捆绑到一个文件中..
就这么简单，不需要两次包含same css files，一旦包含它就会反映在整个项目中。

标签： javascript reactjs create-react-app

【解决方案1】：

create-react-app 在后台使用 Webpack，它是一个模块捆绑器，它可以获取所有文件并将它们输出到一个文件中，因此当您在许多地方使用文件时，例如 .css 文件webpack 只会在你的输出文件中包含那个文件 > 所以你不必担心。这也适用于其他资产，如图像、字体、js 文件

了解更多关于 webpack 的信息

webpack tutorial

【讨论】：

【解决方案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>
    }
}

第一个组件

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

第二个组件

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

这不会像您体验的那样为您提供双重文件导入。

弹射的另一种用途

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

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

【讨论】：