使用React和Webpack的热链接图像渲染速度非常慢

Question

我正在尝试使用Unsplash的API渲染图像。

首先，我从其API获取一些图片：

  performSearch = async (query, page) => {
    try {
      const data = await axios.get(
        `https://api.unsplash.com/search/photos/?page=${page}&per_page=10&query=${query}&client_id=${
          process.env.UNSPLASH_API_KEY
        }`
      )
      const gallery = data.data.results
      this.setState(() => ({
        gallery,
        loadingState: false
      }))
    } catch (err) {
      console.log(err)
    }
  }

这很好，并且响应速度很快。但是，当我单击其中的一个使用CSS将其设置为背景时，第一次加载会花费很多时间（有时需要45秒以上）。我使用的是“常规尺寸”，这意味着图像通常在1-3mb之间。当我在另一个浏览器窗口中加载链接时，它以毫秒为单位加载。

我认为这可能与链接未直接引用图像有关。链接采用这种格式，由于Unsplash的热链接规则，我需要保持这种链接状态。

常规：https://images.unsplash.com/photo-1512917987294-2a0f01df2fb8?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjI5OTI1fQ&s=cb9f1dfbe5f7a70f89c2e697e76bc40e

这意味着我正在尝试像这样渲染css：

background-image: url('https://images.unsplash.com/photo-1512917987294-2a0f01df2fb8?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjI5OTI1fQ&s=cb9f1dfbe5f7a70f89c2e697e76bc40e')

我正在将React 16.4和Webpack 4.10.2和Styled Components 3.3用于CSS。