Seonglae Cho- Client-Side Code Splitting:
React.lazyis a React feature introduced in version 16.6 that allows you to render a dynamic import as a regular component. It is primarily used for code splitting and lazy loading components in the client-side environment.
- Suspense Integration: It must be used in conjunction with the
Suspensecomponent, which lets you specify the loading indicator while the lazy-loaded component is being fetched.
- Limitations:
React.lazyandSuspenseare not yet available for server-side rendering in React. This means that if you're usingReact.lazyin a Next.js project, the lazy-loaded components will only be split and lazy-loaded in the client-side bundle, not during SSR.
Code splitting with React.lazy and Suspense
The React.lazy method makes it easy to code-split a React application on a component level using dynamic imports. Use it along with Suspense to show appropriate loading states to your users.
https://web.dev/code-splitting-suspense/?utm_source=lighthouse&utm_medium=devtools
코드 분할 - React
대부분 React 앱들은 Webpack, Rollup 또는 Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 "번들 된" 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있습니다. 예시 App Bundle 주의 실제 번들은 위 예시와는 많이 다르게 보일 겁니다. Create React App이나 Next.js, Gatsby 혹은 비슷한 툴을 사용한다면 여러분이 설치한 앱에서 Webpack을 같이 설치했을 겁니다.
https://ko.reactjs.org/docs/code-splitting.html
