Next.js自定义轮播频繁增删元素导致资源重复下载问题咨询

现有实现的问题 #

你当前的轮播实现逻辑确实不合理，会导致重复下载资源：

• 核心原因是你通过条件判断只渲染当前索引匹配的轮播项，每次切换轮播时会直接卸载上一个轮播的、组件，等轮播循环回来再重新挂载对应组件。浏览器会为新挂载的媒体元素重新发起资源请求，就算有缓存也会有加载延迟，浪费带宽还容易出现切换卡顿。
• 额外注意你当前代码存在明显bug：VideoSlide的url写死为slides[0].video，不管切到哪个轮播项都只会播放第一个视频，需要修改为当前索引对应的视频地址。

优化方案 #

1. 保留所有轮播项DOM，用CSS控制显隐（最优方案） #

所有轮播项全部提前渲染，非当前项仅通过CSS隐藏，不销毁DOM，自然不会重复触发资源加载。
优化后的核心渲染代码如下：

render() {
  return (
    <div className="backgroundSlide" style={{ position: 'relative' }}>
      {slides.map((item, key) => (
        <div 
          key={key}
          {/* 仅当前项显示，其余项隐藏，也可替换为opacity+transition实现淡入淡出动画 */}
          style={{
            display: key === this.state.currentImageIndex ? 'block' : 'none',
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%'
          }}
        >
          {item.video && <VideoSlide url={item.video} />}
          {item.image && (
            <ImageSlide
              url={item.image}
              timer={this.state.slideTime}
            />
          )}
        </div>
      ))}
    </div>
  )
}

如果需要做轮播切换动画，把display替换为opacity、visibility配合transition即可，媒体元素始终保留在DOM中，不会重复加载。

2. 配置静态资源缓存 #

在Next.js中配置静态资源的响应头，设置强缓存规则，就算出现组件卸载重挂载的情况，浏览器也会直接读取本地缓存，不会重复发起网络请求：

// next.config.js 配置示例
module.exports = {
  async headers() {
    return [
      {
        source: '/:all*(svg|jpg|png|mp4|webm)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ]
  },
}

3. 可选：预加载下一轮资源 #

如果轮播项数量较多，不想一次性渲染所有DOM，可以在当前轮播播放到剩余1-2秒时，提前加载下一个轮播项的媒体资源，切换时即可实现秒开。

内容的提问来源于stack exchange，提问作者MomasVII