[section4] 웹사이트 최적화(코드 분할, lazy import)

1. 코드 분할을 하는 이유

-번들링을 하면 하나의 js파일에 모든 코드가 들어가는데 코드 양이 많아짐에따라 코드를 해석하고 실행하는 속도가 느려졌다.
-그래서 코드를 분할하면 코드 실행이 느려지는 지점을 파악하고, 지금 당장 필요한 코드가 아니라면 나중에 불러오도록 해서 로딩 속도를 줄일 수 있다.

2. 번들을 줄이는 법

2-1. Third Party 라이브러리 최소화.

     import _ from'lodash'; 
    _.find([]);

이렇게 라이브러리 전체를 가져와서 사용하는 것 보다, 처음부터 라이브러리 중 필요한 부분만을 가져와야 한다.

    import find from 'lodash/find';
    find([]);

2-2. Dynamic Import

기존에는 Static Import를 사용했다. Static Import는 모듈을 import 할 때, 항상 문서의 상위에 위치하고, 블록문 안에서는 사용하지 못하는 방식이다.

    import moduleA from "library";        
    form.addEventListener("submit", e => {
      e.preventDefault();
      someFunction();
    });

    const someFunction = () => {
      /* 여기서 moduleA 사용, 이게 static import*/
    }
    ---------------------
    form.addEventListener("submit", e => {
      e.preventDefault();
        /* 동적 불러오기는 이런 식으로 코드의 중간에 불러올 수 있게 됩니다. */
      import('library.moduleA')
        .then(module => module.default)
        .then(someFunction())
        .catch(handleError());
    //then 함수 내부에서 필요한 코드만 가져온다.
    });

    const someFunction = () => {
        /* moduleA를 여기서 사용 , dynamic import */
    }
    이렇게 동적으로 모듈을 가져옴으로써 submit 이벤트가 발생했을 때만 모듈을 불러온다.

3. React.lazy()

3-1. 개념

-컴포넌트에 dynamic import를 적용하는 메서드. react는 SPA이므로 초기 로딩에 모든 컴포넌트를 다 불러오기 때문에 로딩 속도가 지연된다. 하지만 당장 사용하지 않는 컴포넌트를 동적으로 불러온다면, 초기 로딩속도를 개선할 수 있다.

3-2 구현

const Home = lazy(() => import("./Home"));
const CreateBlog = lazy(() => import("./blogComponent/CreateBlog"));
const BlogDetails = lazy(() => import("./blogComponent/BlogDetail"));
  return (
    <BrowserRouter>
      {error && <div>{error}</div>}
      <div className="app">
        <Navbar />
        <Suspense fallback={<div>Loading...</div>}>
          <div className="content">
            <Routes>
              <Route exact path="/" element={<Home />} />
              <Route path="/create" element={<CreateBlog />} />
              <Route path="/blogs/:id" element={<BlogDetails />} />
              <Route path="/blogs/:id" element={<NotFound />} />
            </Routes>
          </div>
        </Suspense>
        <Footer />
      </div>
    </BrowserRouter>
  );

lazy로 컴포넌트를 import 하면 해당 경로로 이동했을 때 컴포넌트를 불러오는데, 컴포넌트를 로딩하는 동안 Suspense 컴포넌트가 로딩 화면을 보여주는 역할을 한다. lazy로 불러온 컴포넌트를 wrapping하면 된다.
로딩화면은 fallback에 입력한 코드를 렌더링 한다.