코드 스플리팅

SPA 싱글 페이지 어플리케이션의 단점은 처음 페이지 로드 시 당장 보지 않을 요소들까지 전부 로드한다는 것이다.

그렇기 때문에 처음 로드 이후에 작동이 하나의 어플리케이션처럼 부드럽게 작동하기 때문에 이 점은 이점으로 작용할 수 있지만,

페이지 안에 너무 많은 요소들이 있을 경우에는 이를 한번에 로드하는 것을 막아야 한다.

 

 

React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수 없고, React.suspense 컴포넌트의 하위에서 렌더링 되어야 한다.

 

 

1. Route level

- 라우트마다 다른 컴포넌트로 관리를 하고 있을 경우에, 각 라우트를 import 함수를 통해 분리된 빌드 파일로 관리할 수 있다.

- 유저가 다른 페이지로 넘어갈 때만 그 페이지를 비동기적으로 로딩할 수 있다.

- 초기 렌더링 시간은 줄어드나, 페이지 이동시마다 로딩화면이 보여지기 때문에 이 점을 잘 고려해보아야 한다.

import React, {Suspense, lazy} from 'react';
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Component1 = lazy();
const Component2 = lazy();

const App = () => (
	<Router>
    	<Suspense fallback = { /* 로딩할 때 보여줄 컴포넌트 */}>
        	<Route exact path="/" component={Home}/>
        	<Route path="detailed" component={About}/>
        </Suspense>
    </Router>
);

 

 

2. Component level

- 페이지 안에 있지만 보이지 않는 컴포넌트가 존재할 경우

- 페이지 안의 컴포넌트를 사용할 때 로드해올 수 있다.

 

Notify.jsx

export const Notify = () => {
	window.alert('notify');
};

 

App.jsx

import React, {useState} from 'react';

const App = () => {
	const handleNotify = () => {
    	import ('./Notify').then(({default:Notify})=>{
        	Notify();
        })
    }
    
    return(
    	<Button onClick={handleNotify} >추가</Button>
    )
}

export default App

 

 

다음 블로그 게시물을 참고하였습니다.

https://velog.io/@s_sangs/%EC%BD%94%EB%93%9C-%EC%8A%A4%ED%94%8C%EB%A6%AC%ED%8C%85-Code-Splitting

[React] 코드 스플리팅 (Code Splitting)