为什么我的动态导入会发出 2 个网络请求？答案

【问题标题】：Why does my dynamic import make 2 network request?为什么我的动态导入会发出 2 个网络请求？
【发布时间】：2019-07-09 12:01:33
【问题描述】：

我有一个文件，我在其中导入了一些 css（通过 raw-loader）并将其放在文档头部的样式标签中，然后我默认导出相应的 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。

【问题讨论】：

标签： javascript reactjs webpack create-react-app dynamic-import

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

【讨论】：

但是为什么css和react-component在同一个文件里呢？
因为它是作为字符串导入的（原始加载器）
我如何编写这段代码，我只得到一个文件？
您不希望代码在一个文件中结束。导入被缓存，因此将重用或可重用的代码作为单独的导入很有用，因为它只会加载一次。
当我导入Swiper.js我只想请求一个文件。这不可能吗？