Lazy Loading

코드 분할 (code splitting)이 나온 배경

-> 프로젝트 규모가 커질수록 자바스크립트 파일 용량이 커짐에 따라 페이지 로딩 속도가 느려진다.

-> 코드 분할을 하게되면 지금 당장 필요한 코드가 아니라면 따로 분리시켜 필요할 때 가져다 사용 할 수 있다.

 

webpack, @babel/plugin-syntax-dynamic-import, loadable-components 이용한 방법

-> .babelrc 에서 플러그인 하기

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import"
  ]
}

일부러 지연 시간을 주면서 로딩하기

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router} from 'react-router-dom';
import loadable from '@loadable/component';
import pMinDelay from 'p-min-delay';
import Menu from './pages/Menu';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

const LoadableComponent = loadable(() => pMinDelay(import("./pages/Menu.js"),2000), {
  fallback: console.log('loading...')
});

ReactDOM.render(
  <DndProvider backend={HTML5Backend}>
    <Router>
	  <LoadableComponent />
    </Router>
  </DndProvider>, 
  document.getElementById("root")
);

참고 자료:

https://loadable-components.com/docs/delay/

Loadable Components

https://perfectacle.github.io/2017/03/13/webpack2-code-splitting/

(Webpack 2) 코드를 분할해보자!