如何阻止Next.js加载其他页面的不必要代码块？

一、先定位冗余代码来源 #

1. 用ANALYZE=true next build启动webpack-bundle-analyzer，可视化查看每个chunk的组成，确认是第三方依赖、跨页面组件还是全局代码导致的冗余。
2. 查看.next/static/chunks/pages/下的页面chunk文件，对比文件名与内容，确认是否有其他页面的组件被打包进当前页面的chunk。
3. 结合覆盖率报告，标记出未被当前页面使用的代码块：如果是第三方库的冗余部分，优先考虑替换或树摇；如果是其他页面的组件，排查导入链路。

二、针对性优化措施 #

1. 修正动态导入的使用方式

• 仅在客户端渲染的组件，必须添加ssr: false，避免服务端打包时将其纳入主chunk：

import dynamic from 'next/dynamic';

const HeavyClientComponent = dynamic(() => import('../components/HeavyClientComponent'), {
  ssr: false,
  loading: () => null,
});

• 全局Layout或公共组件中，若包含仅特定页面使用的子组件，拆分为动态导入，而非直接全局导入：

// Layout.js
const CheckoutSidebar = dynamic(() => import('../components/CheckoutSidebar'), {
  ssr: false,
});

export default function Layout({ children, isCheckout }) {
  return (
    <div>
      <GlobalHeader />
      {isCheckout && <CheckoutSidebar />}
      {children}
    </div>
  );
}

2. 排查Next.js默认代码分割的干扰项

• 不要随意覆盖next.config.js中的splitChunks配置，Next.js v12已有成熟的默认分割策略，自定义配置可能破坏原有逻辑。若需调整，基于默认配置扩展：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.optimization.splitChunks.cacheGroups = {
        ...config.optimization.splitChunks.cacheGroups,
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      };
    }
    return config;
  },
};

• 检查getServerSideProps/getStaticProps中的导入：若导入了仅服务端使用的模块，需用typeof window === 'undefined'包裹，或移至server/目录下，避免被打包进客户端chunk。

3. 彻底禁用不必要的预加载

• 所有next/link组件明确设置prefetch={false}，同时排查客户端代码中是否主动调用了router.prefetch()：

import Link from 'next/link';

// 正确写法
<Link href="/other-page" prefetch={false}>
  <a>跳转至其他页面</a>
</Link>

• 若使用了第三方路由工具或自定义跳转逻辑，确认未触发自动预加载行为。

4. 优化第三方依赖的树摇

• 替换未做tree-shaking的库：比如用lodash-es替代lodash，使用import { debounce } from 'lodash-es'而非全局导入。
• 在package.json中添加sideEffects字段，标记无副作用的文件，帮助webpack精准tree-shake：

{
  "sideEffects": [
    "*.css",
    "*.scss"
  ]
}

三、验证优化效果 #

每次调整后，重新运行next build && next start，用Lighthouse和覆盖率工具复测，对比chunk体积与加载情况，确认冗余代码是否被移除。

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