React - импорт файлов

Question

У меня есть вопрос об импорте файлов в React.js (создайте приложение реакции).

Например, у меня есть два компонента firstComponent.js и secondCmponent.js

В обоих файлах я импортирую один и тот же файл со стилями CSS: import 'some.css';

1. Означает ли это, что послепри создании приложения у меня будет код из some.css x2 ?

2. Если я вызываю компоненты рядом (одновременно)

пример:

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

Inпамять браузера, some.css будет x2 ?

Answer 1

Но почему вы включаете один и тот же файл дважды?Почему вы не можете разделить ваш 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 у меня нет этого в голове, но я думаю, что в настоящее время это более или менее включено по умолчанию (нужен источник).

Answer 2

create-реагировать-приложение под капотом использует Webpack, который является модульным упаковщиком, который берет все ваши файлы и выводит их в один файл, поэтому, когда вы используете файл, например, .css файл во многих местах webpackвключит этот файл только один в ваш выходной файл>, так что вам не о чем беспокоиться.это также работает для других ресурсов, таких как изображения, шрифты, файлы js

, чтобы узнать больше о веб-пакете

учебник по веб-пакету