모든페이지에서 여러가지 라이브러리가 전부 필요하지 않다.
라이브러리는 많은 데이터를 쓰게되고, 렌더링시간이 더 오래걸리기 때문에 페이지별로 라이브러리를 나눠서 사용해주는것이 최적화에 용이하다.
페이지를 로드하다보면 왜 ?뭐 때문에? 로딩이 오래걸리는지 의문이 들때가 많다. 이런경우 cra-bundle-analyzer 를 설치해 어떤 부분의 라이브러리 / 모듈 이 페이지의 시간을 잡아먹는지 찾아볼 수 있다!
cra-bundle-analyzer 사이트
설치
npm install --save-dev cra-bundle-analyzer
실행
npx cra-bundle-analyzer
어떤 라이브러리들이 사용되는지 간접적으로 볼 수 있고, 해당 페이지에 필요한 라이브러리를 골라내기 용이하다.
이렇게 라이브러리나 모듈들이 모든페이지에 로딩되어 페이지당 많은데이터를 잡아먹는것을 방지하기 위해 여러가지 모듈을 만들어 페이지당 할당시켜주거나, 페이지를 여러가지 모듈에 접근하게 하도록 코드를 짜야한다.
(한마디로 모듈을 페이지마다 재사용! 페이지마다 필요한 라이브러리만을 불러오도록 하는것이다)
Code Splitting을 활성화하기 위해선 webpack 설정을 해야한다.
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>
);
컴포넌트를 전부 불러오지 않고, 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'),
},
],
});