모든페이지에서 여러가지 라이브러리가 전부 필요하지 않다.
라이브러리는 많은 데이터를 쓰게되고, 렌더링시간이 더 오래걸리기 때문에 페이지별로 라이브러리를 나눠서 사용해주는것이 최적화에 용이하다.

범인찾기 👀

페이지를 로드하다보면 왜 ?뭐 때문에? 로딩이 오래걸리는지 의문이 들때가 많다. 이런경우 cra-bundle-analyzer 를 설치해 어떤 부분의 라이브러리 / 모듈 이 페이지의 시간을 잡아먹는지 찾아볼 수 있다!

cra-bundle-analyzer 사이트

https://www.npmjs.com/package/cra-bundle-analyzer

설치

npm install --save-dev cra-bundle-analyzer

실행

npx cra-bundle-analyzer

어떤 라이브러리들이 사용되는지 간접적으로 볼 수 있고, 해당 페이지에 필요한 라이브러리를 골라내기 용이하다.

Code Splitting

이렇게 라이브러리나 모듈들이 모든페이지에 로딩되어 페이지당 많은데이터를 잡아먹는것을 방지하기 위해 여러가지 모듈을 만들어 페이지당 할당시켜주거나, 페이지를 여러가지 모듈에 접근하게 하도록 코드를 짜야한다.
(한마디로 모듈을 페이지마다 재사용! 페이지마다 필요한 라이브러리만을 불러오도록 하는것이다)

webpack

Code Splitting을 활성화하기 위해선 webpack 설정을 해야한다.

https://webpack.js.org/guides/code-splitting/

React

https://ko.reactjs.org/docs/code-splitting.html

Suspense와 lazy를 사용해 Code splitting을 해줄 수 있다.

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

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

Vue

https://velog.io/@kyh196201/0106

컴포넌트를 전부 불러오지 않고, path에 따라 활성시켜준다

// import LoginPage from '@/views/LoginPage.vue';
// import SignupPage from '@/views/SignupPage.vue';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'),
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
  ],
});

Code Splitting [전/후]