面试题：Next.js中如何实现代码分割以优化页面加载性能

动态导入（Dynamic Imports）

实现方式：在Next.js中，可以使用ES2020的动态导入语法 import()。例如，在页面组件中，如果有一个较大的组件不想在首屏时就加载，可以这样写：

const MyLargeComponent = dynamic(() => import('./MyLargeComponent'));

function MyPage() {
  return (
    <div>
      <h1>My Page</h1>
      <MyLargeComponent />
    </div>
  );
}

性能优化作用：
- 首屏加载时间：减少首屏加载的代码量，因为只有在实际需要渲染 MyLargeComponent 时才会导入它，从而加快首屏加载速度。
- 带宽占用：降低了初始请求的带宽，因为初始的JavaScript包体积变小了。只有在需要的时候，才会请求额外的代码。

Next.js的路由动态导入

实现方式：Next.js的路由系统默认支持代码分割。当定义页面路由时，每个页面组件都是按需加载的。例如，在 pages/about.js 这样的页面文件，只有在用户导航到 /about 页面时，该页面的代码才会被加载。

// pages/about.js
function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Some information about our company...</p>
    </div>
  );
}

export default AboutPage;

性能优化作用：
- 首屏加载时间：确保首屏只加载当前页面所需的代码，不会加载其他页面的代码，极大地优化了首屏加载性能。
- 带宽占用：用户在访问特定页面之前，不会下载该页面的代码，从而减少了不必要的带宽占用。

Webpack的Code Splitting（通过Next.js配置间接使用）

实现方式：Next.js基于Webpack构建，虽然开发者通常不需要直接配置Webpack的代码分割，但可以通过 next.config.js 文件来定制Webpack配置，从而影响代码分割策略。例如，可以使用 splitChunks 配置来控制如何分割代码块。

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.optimization.splitChunks = {
        chunks: 'all',
        minSize: 20000,
        minRemainingSize: 0,
        minChunks: 1,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
        enforceSizeThreshold: 50000,
        cacheGroups: {
          defaultVendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            reuseExistingChunk: true,
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
          },
        },
      };
    }
    return config;
  },
};

性能优化作用：
- 首屏加载时间：通过合理配置 splitChunks，可以将公共代码提取出来并缓存，下次加载相关页面时，若公共代码已缓存则无需再次下载，加快首屏加载。例如，将多个页面都用到的第三方库代码提取到一个单独的代码块，提高加载效率。
- 带宽占用：减少了重复代码的传输，通过提取公共代码块，多个页面可以共享这些代码块，降低了整体的带宽占用。

星途面试题库

面试题：Next.js中如何实现代码分割以优化页面加载性能

知识考点

面试题答案

动态导入（Dynamic Imports）

Next.js的路由动态导入

Webpack的Code Splitting（通过Next.js配置间接使用）