为 React/Webpack 动态要求图像或许多要求的成本（img）答案

【问题标题】：Dynamically requiring images for React/Webpack OR what is cost of many require(img)为 React/Webpack 动态要求图像或许多要求的成本（img）
【发布时间】：2017-02-22 23:03:12
【问题描述】：

我正在创建一个 React 组件，它随机循环浏览大量背景图像。根据我的理解，我可以在这里忽略 Webpack，而只是动态生成 require/import 语句并将它们传递给组件。

但是，如果我希望 Webpack 使用加载器并生成哈希等 - 我还没有找到解决方案。

这个问题很相似，但回答没有解决问题： Dynamically Add Images React Webpack

我当前的解决方案只需要组件中的所有图像 - 但是，我想知道这样做的“成本”是多少 - 只是增加了捆绑包的大小？附上示例代码来说明我的意思：

import React from 'react';
import styles from './Background.css';

const pic0 = require('./imgs/0.jpg');
const pic1 = require('./imgs/1.jpg');
const pic2 = require('./imgs/2.jpg');
const pic3 = require('./imgs/3.jpg');
// etc etc etc

class Background extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pic: {},
    };
    this.changeBackground = this.changeBackground.bind(this);
  }

  componentWillMount() {
    this.setState({ pic: pic0 });
  }

  componentDidMount() {
    // set timeout here
  }

  changeBackground() {
    // change background via component state here
  }

  render() {
    return (
        <img className={styles.background} src={this.state.pic} />
    );
  }
}

export default Background;

想法？任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

这取决于你配置 webpack 使用哪个加载器来加载这些图像。

网址加载器

当您使用 url 加载器时，图像的内容将被 base64 编码并嵌入到您的 JavaScript 包中。

因此，您需要的图片越多，浏览器最初必须下载的包就越大。优点是所有图片都加载到浏览器中，可以立即显示。

文件加载器

当您使用文件加载器时，图像文件被复制到您的分发文件夹（通常使用内容哈希重命名），并且图像的 URL 存储在您的 JavaScript 包中。

需要大量图片对 JavaScript 包的大小影响很小。该应用程序启动速度更快。缺点是浏览器必须在显示图像时按需从服务器获取图像。

总结

url-loader：更大的 JS 包，所有图像立即显示，更难利用图像缓存

file-loader：更小的 JS 包，显示时单独检索图像，更好地利用图像缓存。

根据您的问题陈述（随机循环浏览大量图像），我将从file-loader 开始。

好消息是无论哪种方式，您的 JS 代码都没有改变：您只需将导入的图像视为 URL。如果你改变主意，它只是一个 webpack 重新配置。

由于您有一个完整的图像文件夹，我还建议使用webpack context 基本上要求将整个文件夹放在一行中：

const imageReq = require.context("./imgs", false, /\.jpg$/);

setUrl(i) {
   // "require" a specific image e.g. "./4.jpg"
   const url = imageReq(`./${i}.jpg`);
   this.setState({pic: url});
}

// ...

【讨论】：