NextJS动态路由按需加载对应组件 优化JS打包体积方案

你的判断是对的，当前顶部静态导入三个组件的写法，确实会让最终打包产物包含全部三个组件的代码，用户访问任意页面都会加载全量组件资源。Next.js提供的dynamic() API完全适配静态生成（SSG）场景，可以完美实现组件按需加载、代码自动分割，不会把无关组件打入当前页面的加载资源中。

首先先修正你原代码里的基础错误：你重复定义了两次getStaticPaths，且缺失了数据获取必需的getStaticProps方法，你写的第一份返回props的逻辑实际是getStaticProps的内容。

正确实现代码 #

直接替换pages/[slug].js的内容即可：

// pages/[slug].js
import dynamic from 'next/dynamic'

// 建立模板和对应组件的映射关系，所有组件均通过dynamic动态导入
const pageComponents = {
  aboutPage: dynamic(() => import('../components/AboutPage')),
  blogPage: dynamic(() => import('../components/BlogPage')),
  contactPage: dynamic(() => import('../components/ContactPage'))
}

export default function DynamicPage({ page }) {
  if (!page?.template || !pageComponents[page.template]) return null
  const CurrentPage = pageComponents[page.template]
  return <CurrentPage {...page} />
}

export const getStaticProps = ({ params }) => {
  // 替换为你实际的数据源拉取逻辑，比如从CMS、本地文件获取对应slug的页面数据
  const allPageData = [
    { template: 'aboutPage', slug: 'about' },
    { template: 'contactPage', slug: 'contact' },
    { template: 'blogPage', slug: 'blog' }
  ]
  const targetPage = allPageData.find(item => item.slug === params.slug) ?? null

  return {
    props: {
      page: targetPage
    }
  }
}

export const getStaticPaths = () => {
  const fetchedData = [
    {
      template: 'aboutPage',
      slug: 'about'
    },
    {
      template: 'contactPage',
      slug: 'contact'
    },
    {
      template: 'blogPage',
      slug: 'blog'
    }
  ]

  return {
    paths: fetchedData.map(({ slug }) => ({ params: {slug} })),
    fallback: 'blocking'
  }
}

实现原理说明 #

• 所有通过next/dynamic包裹的导入，Next.js构建时会自动将每个组件拆分为独立的JS代码块（chunk），不会把三个组件全部打包到动态路由的主代码块中
• 静态生成阶段不受动态导入影响，Next.js依然会在构建时预渲染所有getStaticPaths返回路径对应的HTML内容
• 用户端访问时，只有进入对应slug的路由，才会发起网络请求加载对应组件的代码块，完全不会加载另外两个无关组件的资源，从根本上减少不必要的资源加载体积
• 如果需要优化加载体验，可以给dynamic传入第二个配置参数，自定义组件加载过程中的兜底UI，示例：

aboutPage: dynamic(() => import('../components/AboutPage'), {
  loading: () => <div>页面加载中...</div>
})

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