为什么我的动态导入产生2个网络请求？

Question

我有一个文件，该文件中（通过raw-loader）导入了一些CSS，并将其放在文档头部的样式标签中，然后默认导出相应的react-component。

// 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';

当我延迟加载该文件webpack时，我收到2个网络请求。

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

第二个文件仅包含样式标签的创建并将其放在头部，css和react-component的代码位于第一个“供应商”文件中。为什么webpack将其分成2个文件，我该如何避免呢？如果需要的话，我会使用create-react-app。

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