Почему мой динамический импорт делает 2 сетевых запроса?

Question

У меня есть файл, в который я импортирую некоторые css (через raw-loader) и помещаю их в тег стиля в заголовке моего документа, после чего я по умолчанию экспортирую соответствующий реагирующий компонент.

// Swiper.js
import swiperStyles from '!!raw-loader!swiper/dist/css/swiper.min.css';

const swiperElement = document.createElement('style');
swiperElement.innerHTML = swiperStyles;

document.head.append(swiperElement);

export { default } from 'react-id-swiper';

Когда я лениво загружаю этот файл веб-пакета, я получаю 2 сетевых запроса.

const Swiper = import('./Swiper');

Второй файл содержит только создание тега стиля и размещение егов голове, css и код для реагирующего компонента находятся в первом файле "vendor".Почему webpack разбивает его на 2 файла и как этого избежать?Я использую create-реакции-приложение, если это имеет значение.

Answer 1

Это потому, что они соответствуют двум различным импортам, управляемым отдельно:

export { default } from 'react-id-swiper'; // this will be imported somewhere


import swiperStyles from '!!raw-loader!swiper/dist/css/swiper.min.css'; // this is imported and used separately