gpt4 book ai didi

javascript - 为 React/Webpack 动态需要图像或者许多 require(img) 的成本是多少

转载 作者:行者123 更新时间:2023-11-29 10:33:54 25 4
gpt4 key购买 nike

我正在创建一个随机循环显示大量背景图像的 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;

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

最佳答案

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

网址加载器

当您使用 url loader 时,图像的内容将进行 base64 编码并嵌入到您的 JavaScript 包中。

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

文件加载器

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

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

总结

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

文件加载器:较小的 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});
}

// ...

关于javascript - 为 React/Webpack 动态需要图像或者许多 require(img) 的成本是多少,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40027487/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com