面试题：Next.js页面路由懒加载与代码分割对应用性能的影响及优化策略

Next.js页面路由懒加载与代码分割对应用性能的影响

加载速度
- 首次加载：
  - 懒加载与代码分割：将页面代码分割成小块，首次加载时只加载必要的核心代码，如首页相关代码，避免一次性加载大量代码，显著提升首次加载速度。例如，一个电商应用，首页加载时不需要加载商品详情页、购物车页等代码，通过懒加载，这些页面代码在需要时才加载。
  - 无懒加载与代码分割：所有页面代码打包在一起，首次加载时需下载大量代码，导致加载时间长。特别是应用规模较大，页面众多时，这种情况更严重。
- 后续页面切换：
  - 懒加载与代码分割：当切换到新页面时，才加载该页面代码，减少了不必要的等待时间，提升页面切换的流畅度。比如在一个多页面的资讯应用中，从文章列表页切换到具体文章页时，仅加载文章页代码。
  - 无懒加载与代码分割：由于所有代码已加载，页面切换速度相对较快，但前提是首次加载完成，若首次加载慢，整体体验不佳。
内存占用
- 懒加载与代码分割：在任何时刻，内存中仅存在当前页面及相关依赖代码，降低了内存占用。例如，在一个复杂的企业级应用中，不同模块（页面）的代码按需加载，不会使内存一直占用大量空间。
- 无懒加载与代码分割：所有页面代码加载到内存，内存占用大，尤其对于移动设备或内存有限的设备，可能导致应用运行缓慢甚至卡顿。

优化策略

动态导入（Dynamic Imports）
- 适用场景：适用于大部分页面路由场景，特别是那些用户不一定会访问到的页面，如电商应用中的用户设置页、帮助中心页等。
- 实现方式：在Next.js中，使用动态导入语法import dynamic from 'next/dynamic';。例如：

const SomeComponent = dynamic(() => import('../components/SomeComponent'));

function HomePage() {
  return (
    <div>
      <SomeComponent />
    </div>
  );
}

export default HomePage;

这里SomeComponent组件会在需要渲染时才加载。

路由预取（Route Prefetching）
- 适用场景：适用于用户大概率会访问的下一个页面，比如在列表页，用户很可能点击进入详情页。
- 实现方式：Next.js默认会在浏览器空闲时预取可能访问的页面代码。可以通过next.config.js文件进行配置，如：

module.exports = {
  experimental: {
    prefetch: true
  }
};

也可以在代码中手动预取，例如在一个列表项点击时预取详情页代码：

import Link from 'next/link';
import { useRouter } from 'next/router';

function ListItem({ item }) {
  const router = useRouter();
  const handleClick = () => {
    router.prefetch(`/item/${item.id}`);
  };
  return (
    <Link href={`/item/${item.id}`} onClick={handleClick}>
      <a>{item.title}</a>
    </Link>
  );
}

export default ListItem;

基于用户行为的代码分割
- 适用场景：适用于根据用户特定行为来加载不同代码块的场景，例如，根据用户角色（普通用户、管理员等）加载不同的功能页面代码。
- 实现方式：在应用中检测用户行为或角色信息，然后动态导入相应代码。比如：

import dynamic from 'next/dynamic';

function App() {
  const userRole = getCurrentUserRole();// 获取用户角色的函数
  const AdminPanel = dynamic(() => import('../components/AdminPanel'), {
    ssr: false,
    loading: () => <div>Loading...</div>
  });
  const UserPanel = dynamic(() => import('../components/UserPanel'), {
    ssr: false,
    loading: () => <div>Loading...</div>
  });

  return (
    <div>
      {userRole === 'admin' && <AdminPanel />}
      {userRole === 'user' && <UserPanel />}
    </div>
  );
}

export default App;

星途面试题库

面试题：Next.js页面路由懒加载与代码分割对应用性能的影响及优化策略

知识考点

面试题答案

Next.js页面路由懒加载与代码分割对应用性能的影响

优化策略