React初始加载是否渲染bundle中所有组件？路由组件useEffect疑问

1. 访问首页时是否会渲染两个组件并执行effect？ #

不会。React Router的<Routes>组件会仅匹配当前URL对应的路由规则，当你访问首页路径/时，只有path="/"对应的<Home />组件会被渲染、挂载，进而执行它的useEffect。而path="pay"对应的<Pay />组件不会被实例化和挂载，它的useEffect自然也不会执行。

不过要注意：如果没有做代码分割，初始打包生成的JS bundle会包含Home和Pay两个组件的代码，但这只是代码被打包在一起，并不代表组件会被渲染执行。

2. 能否通过代码分割实现仅加载当前路由的组件？ #

完全可以。通过代码分割可以将不同路由的组件拆分成独立的代码块，只有当用户访问对应路由时，才会加载该组件的代码块，从而减小初始bundle的体积，提升页面加载速度。

具体实现可以结合React的lazy和SuspenseAPI，配合React Router使用：

import { Routes, Route } from 'react-router-dom';
import { lazy, Suspense } from 'react';

// 懒加载路由组件
const Home = lazy(() => import('./Home'));
const Pay = lazy(() => import('./Pay'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="pay" element={<Pay />} />
      </Routes>
    </Suspense>
  );
}

代码分割的核心逻辑 #

代码分割的本质是告诉打包工具（比如Webpack）将特定模块拆分为单独的代码块，而不是全部打包进初始bundle。当React通过lazy加载组件时，会在组件需要渲染时才去请求对应的代码块，加载完成后再渲染组件。这样初始加载时只会下载首页相关的代码，访问支付页时才会下载Pay组件的代码。

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