动态需要React/Webpack的图像，或者是许多需要的成本(img)

Dynamically requiring images for React/Webpack OR what is cost of many require(img)

本文关键字：许多需 img 或者是 图像 React Webpack 动态      更新时间：2023-09-26

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

然而，如果我想让Webpack使用加载器并生成哈希等-我还没有找到解决方案。

这个问题是类似的，但回答没有解决问题:动态添加图片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;

想法吗?

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

url-loader

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

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

file-loader

当您使用file-loader时，图像文件被复制到您的分发文件夹(通常使用内容散列重命名)，并且图像的URL存储在JavaScript包中。

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

总结

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

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

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

好消息是你的JS代码是不变的:你只是把导入的图像作为url。如果你改变主意，这只是一个webpack的重新配置。

因为你有一个整个文件夹的图像，我还建议使用webpack上下文，基本上要求整个文件夹在一行:

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});
}
// ...
相关文章：