Next.js 15动态路由下代码分割失效问题咨询

是不是已知限制或Bug？ #

这不是Next.js 15的Bug，而是App Router下catch-all路由（[[...slug]]）的默认打包行为导致的。catch-all路由本质上被视为单个页面路由，Webpack会默认把该页面中所有直接或间接引入的模块（包括动态导入的组件）合并到同一个主chunk中，除非你手动指定chunk分割规则。

如何启用正确的JS与CSS代码分割？ #

1. 给动态导入添加Webpack chunk注释 #

在动态导入组件时，通过魔法注释告诉Webpack将组件打包为独立chunk，避免合并到主页面chunk中。示例：

// 使用dynamic方法
const Test = dynamic(() => 
  import('@/components/Test' /* webpackChunkName: "test-component" */)
);

// 或使用await import
const Test = (await import('@/components/Test' /* webpackChunkName: "test-component" */)).default;

配置后，Test组件的JS和对应的SCSS模块会被单独打包成命名chunk，仅当slug匹配时才会加载该资源。

2. 拆分路由结构，减少catch-all路由的使用 #

如果有明确的子路由（比如/news），直接创建独立的页面文件，让Next.js自动处理代码分割：

app
 [locale]
   [[...slug]]
      page.tsx
   news
      page.tsx  // 新增独立路由页面
   layout.tsx

此时访问/news会加载该页面的专属chunk，不会包含其他页面的资源。catch-all路由仅用来处理无明确匹配的动态路径。

3. 预渲染静态页面（generateStaticParams） #

如果动态路由对应的页面可以预渲染，在[[...slug]]/page.tsx中导出generateStaticParams，Next.js会为每个生成的参数创建独立的页面chunk：

export async function generateStaticParams() {
  // 返回所有需要预渲染的slug组合
  return [
    { slug: ['news'] },
    { slug: ['about'] },
    { slug: ['blog', 'post-1'] },
  ];
}

预渲染后，每个静态页面都会拥有独立的JS和CSS chunk，访问时仅加载对应资源。

推荐的解决方法与最佳实践 #

• 优先使用明确路由：尽可能为已知的页面创建独立路由文件，让Next.js的自动代码分割机制发挥最大作用，避免过度依赖catch-all路由。
• 强制chunk拆分：在catch-all路由的动态导入中必须添加Webpack chunk注释，确保组件资源被单独打包。
• 组件内样式导入：确保SCSS模块是在组件内部导入（而非在catch-all页面顶层导入），这样样式会跟随组件的chunk一起拆分，不会被打包到主chunk中。
• 预渲染优化：对可预渲染的动态页面使用generateStaticParams，既提升首屏性能，又自动实现资源拆分。

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