NextJS应用使用Lottie文件导致性能下降的优化方案咨询

1. 优先压缩Lottie源文件 #

• 针对原始Lottie JSON文件做专项压缩，最高可缩减60%以上体积，核心是删除冗余的贝塞尔曲线控制点、合并重复图层属性，不会损失肉眼可见的动画精度
• 如果动画是从AE导出的，导出时勾选「精简表达式」「移除未使用资源」选项，避免导出无用的图层、蒙版、特效配置数据
• 对于色彩简单的扁平类动画，可转换为dotLottie格式，相比原生JSON体积可再降30%左右，Next.js下可配套@lottiefiles/dotlottie-react库加载使用

2. 实现按需加载与懒加载 #

• 非首屏可见区域的Lottie动画全部开启懒加载：将动画JSON从顶部静态导入改为动态import()，配合IntersectionObserver监听元素可见性，动画进入视口前才发起资源请求，参考实现代码：

import { useEffect, useRef, useState } from 'react'
import Lottie from 'react-lottie'

const ServiceAnimation = () => {
  const [animationData, setAnimationData] = useState(null)
  const containerRef = useRef(null)

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !animationData) {
        // 动态导入对应Lottie JSON文件
        import('../public/animations/service-card.json')
          .then(res => setAnimationData(res.default))
        observer.unobserve(containerRef.current)
      }
    })
    if (containerRef.current) observer.observe(containerRef.current)
    return () => containerRef.current && observer.unobserve(containerRef.current)
  }, [animationData])

  return <div ref={containerRef}>
    {animationData && <Lottie options={{ animationData, loop: true }} height={200} width={200} />}
  </div>
}

• 首屏的Lottie动画可以配合next/dynamic关闭服务端渲染，避免SSR阶段额外的资源加载开销：

import dynamic from 'next/dynamic'
const Lottie = dynamic(() => import('react-lottie'), { ssr: false })

3. 资源缓存与优先级控制 #

• 把Lottie JSON文件放到Next.js的public目录下，配置next.config.js的静态资源缓存规则，给这类资源设置较长的max-age缓存头，用户二次访问时无需重新加载
• 首屏必要的Lottie资源可以在next/head中配置预加载，提前拉取资源：

<link rel="preload" href="/animations/first-screen.json" as="fetch" crossOrigin="anonymous" />

• 非核心动画的加载优先级调低，避免和页面核心的脚本、样式、图片资源抢占带宽

4. 降级备选方案 #

• 弱网环境下可设置静态SVG/PNG作为占位图，动画加载完成前显示占位内容，避免页面出现大块空白
• 如果动画复杂度极高、压缩后体积仍超过150KB，且无需交互控制，可考虑转换为WebM/WEBP动图格式，同等画质下体积比压缩后的Lottie JSON更小，播放性能也更优

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