SPA앱 프로젝트를 진행하면서 앱의 기능이 많아져 bundle의 크기가 점점 증가해 초기로딩이 오래걸리는 문제가 생겼고, 이를 해결 하기위해 code splitting을 적용했습니다.
현재 제가 하고있는 프로젝트는 vue2 + CLI 3 입니다.
개봘 환경 조건은
1. 싱글 파일 컴포넌트 체계(.vue)
2. 웹팩 - 모듈 번들러 (2.x이상)
3.바벨 Syntax-dynamic-import입니다
CLI로 생성한 경우 1,2번은 만족하고 있지만 3번은 별도 설치가 필요합니다.
1. npm으로 설치해 줍니다.
npm install --save-dev babel-plugin-syntax-dynamic-import2. .babelrc, 혹은 babel.config 파일에 플러그인을 추가합니다.
{
"plugins": ["syntax-dynamic-import"]
}3. CLI3를 사용하고 계신다면 webpack의 prefetch preload 플러그인을 삭제해야합니다. 그렇지 않으면 분리된 chunk파일들을 미리 받아오기 때문입니다.
저는 vue.config.js를 사용중이며
chainWebpack: (config) => {
config.plugins.delete("prefetch");
config.plugins.delete("preload");
},
를 추가하여 prefetch 와 preload 기능을 껐습니다.
4. 라우터 파일에 들어가 코드를 수정합니다.
기본으로 import 했던 아래의 방식과는 다르게
import MainMenu from "@/views/main/Main.vue";
동적으로 import 하는 아래의 방식으로 변경합니다!
{
path: 'url 이름',
component: () => import('컴포넌트 이름')
}여기서 chunk파일들을 load하는것을 조절하고 싶다면 아래처럼 webpackChunkName에 공통적으로 같은 이름을 부여하면 이 이름을 가진 chunk가 최초로 로드되는 순간 같은 이름을 설정한 chunk들이 함께 로드되게 됩니다.
또한 chunk파일 이름이 여기서 설정한 이름으로 만들어집니다.
const MainMenu = () => import(/* webpackChunkName: "MainMenu" */ "@/views/main/Main.vue");
'프론트엔드 > vue.js' 카테고리의 다른 글
| ChunkLoadError 해결기 (1) 문제점 파악 및 테스트 과정 (0) | 2022.03.31 |
|---|---|
| [SPA] 뒤로 가기 스크롤 유지에 관하여(2) (0) | 2021.12.27 |
| [SPA] 뒤로 가기 스크롤 유지에 관하여(1) (0) | 2021.12.15 |
| 웹 최적화 3. 이미지에 lazy loading 적용하기 (0) | 2021.12.13 |
| 웹 최적화 1. webpack-bundle-analyzer 플러그인을 이용하여 시각화 하기 (0) | 2021.12.01 |