如何在Next.js中结合Mutation Observer实现Lit组件懒加载（附可行代码）

1. 编写并打包Lit组件 #

先创建一个基础Lit组件，用Vite打包为ES模块（适配Next.js的模块机制）：

1.1 编写Lit组件（src/lazy-lit-card.js） #

import { LitElement, html, css } from 'lit';

export class LazyLitCard extends LitElement {
  static styles = css`
    .card {
      padding: 2rem;
      background: #f0f0f0;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  `;

  static properties = {
    title: { type: String },
    content: { type: String },
  };

  render() {
    return html`
      <div class="card">
        <h2>${this.title}</h2>
        <p>${this.content}</p>
      </div>
    `;
  }
}

// 避免重复定义自定义元素
if (!customElements.get('lazy-lit-card')) {
  customElements.define('lazy-lit-card', LazyLitCard);
}

1.2 Vite打包配置（vite.config.js） #

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/lazy-lit-card.js',
      formats: ['es'],
      fileName: () => 'lazy-lit-card.js',
    },
    rollupOptions: {
      external: ['lit'],
      output: {
        globals: {
          lit: 'lit',
        },
      },
    },
  },
});

运行npm run build后，将dist/lazy-lit-card.js复制到Next.js项目的public目录下。

2. Next.js项目配置与懒加载实现 #

2.1 安装依赖 #

npm install lit

2.2 Next.js核心配置（next.config.js） #

确保Next.js能正确转译Lit的ES模块：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['lit'],
  reactStrictMode: true,
};

module.exports = nextConfig;

2.3 实现视口触发的懒加载组件（components/LazyLitWrapper.js） #

用Intersection Observer监听元素进入视口时加载Lit组件：

'use client';

import { useEffect, useRef, useState } from 'react';

export default function LazyLitWrapper({ title, content }) {
  const containerRef = useRef(null);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting && !isLoaded) {
            // 动态加载Lit组件定义
            import('../public/lazy-lit-card.js').then(() => {
              setIsLoaded(true);
            });
            observer.disconnect();
          }
        });
      },
      { threshold: 0.1 }
    );

    containerRef.current && observer.observe(containerRef.current);
    return () => observer.disconnect();
  }, [isLoaded]);

  return (
    <div ref={containerRef}>
      {isLoaded ? (
        <lazy-lit-card title={title} content={content}></lazy-lit-card>
      ) : (
        <div style={{ padding: '2rem', background: '#eee', borderRadius: '8px' }}>
          加载中...
        </div>
      )}
    </div>
  );
}

2.4 在页面中使用懒加载组件（app/page.js） #

import LazyLitWrapper from '@/components/LazyLitWrapper';

export default function Home() {
  return (
    <main style={{ maxWidth: '800px', margin: '0 auto', padding: '2rem' }}>
      <h1>Next.js + Lit 懒加载示例</h1>
      {/* 占位元素，让Lit组件初始处于视口外 */}
      <div style={{ height: '100vh' }}></div>
      <LazyLitWrapper
        title="Lit 懒加载卡片"
        content="当该元素进入视口时，才会加载并渲染Lit组件"
      />
    </main>
  );
}

3. 替代方案：Next.js动态导入实现懒加载 #

如果不需要视口触发，可直接用Next.js的dynamic API实现组件级懒加载：

'use client';

import dynamic from 'next/dynamic';

// 禁用SSR，确保仅在客户端加载Lit组件
const LazyLitCard = dynamic(
  () => import('../public/lazy-lit-card.js').then(() => ({
    default: () => <lazy-lit-card title="动态导入卡片" content="使用Next.js dynamic实现懒加载" />,
  })),
  {
    ssr: false,
    loading: () => <div>加载中...</div>,
  }
);

export default function DynamicLitPage() {
  return (
    <div style={{ padding: '2rem' }}>
      <LazyLitCard />
    </div>
  );
}

关键注意事项 #

• 自定义元素重复定义：在Lit组件中添加if (!customElements.get('lazy-lit-card'))判断，避免客户端重复加载时报错。
• SSR限制：Lit组件是客户端专属元素，必须在use client组件中使用，或通过ssr: false禁用服务器渲染。
• 模块格式：必须使用ES模块打包Lit组件，CommonJS格式会导致Next.js加载异常。

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