vue - 성능 최적화(번들 사이즈 줄이기, Code Splitting)

1. 번들 사이즈와 Code Splitting이 렌더링 속도에 영향을 주는 이유
2. 번들(webpack) 사이즈 최적화
3. 코드 분할(Code Splitting)
4.이미지 Lazy Loading

 

오늘은 진행하고있는 프로젝트의 첫 웹사이트 접근시 렌더링 속도를 개선하기위한 작업을 포스팅하려고한다.

 

웹사이트의 초기 로딩시간이 길어질수록 사용자 경험은 떨어진다. 네트워크 속도가 빠르다면 크게 문제되진 않겠지만 모두가 좋은 네트워크 환경속에서 있는건 아니기때문에 개선을 하고자한다.

 

프론트엔드에서의 성능 최적화는 여러 관점에서 볼 수 있다.

번들 사이즈 줄이기, Code Splitting, 이미지 lazy loading, 폰트 최적화, 리플로우 / 리페인팅 등등....

폰트 최적화에 대한 포스팅 보기 => https://sikk.tistory.com/120

Web - 웹 폰트(Web Font) 최적화

 

그중 번들 사이즈 줄이기와 Code Splitting, lazy loading을 활용하려 한다.

 

1. 번들 사이즈와 Code Splitting이 렌더링 속도에 영향을 주는 이유

번들 사이즈를 왜 줄일까?

번들 사이즈를 줄이면 렌더링 속도가 개선되는 이유는 랜더링 과정에 있다. 브라우저 렌더링 과정은 아래와 같다. Paint 과정이 실제 웹에 그려지는 단계이고, 페이팅 이전의 단계에서 시간을 줄일수록 렌더링 시간이 줄게 된다.

 

1) Object Model 생성

• DOM 트리 구축
• CSSCOM 트리 구축

2) Render 트리 구축

3) Layout 생성

4) Paint

Html파일과 Css의 파싱을 진행하다가 Js파일을 만나게 되면, 파싱을 중단하고 Js를 실행하게 된다. Js가 종료되면 Html, Css를 다시 파싱한다.

 

브라우저 렌더링 관련 포스팅 => https://sikk.tistory.com/75

Web - 브라우저 랜더링 과정

 

그럼 Code Splitting은 ??

Code Splitting은 SPA에서 성능을 향상시키는 방법이다. SPA는 초기 로딩시 필요한 웹 리소스를 모두 다운로드 받는 특징이 있다. Code Splitting을 활용하게 되면 초기 로딩시에 모든 리소스를 다운로드 받지 않고 필요한 시점에 다운로드 받아 초기 렌더링 속도 개선에 도움을 준다.

 

Code Splitting 적용 전

코드 분할을 적용하기 전 페이지가 로딩되며 초기 로딩속도를 확인한 결과 초기 로딩속도는 935ms이다.

Code Splitting 적용 전 초기 로드 속도

 

Code Splitting 적용 후

코드 분할을 적용한 후 초기 로딩속도를 확인한 결과 초기 로딩속도는 555ms이다. 물론 네트워크의 속도에따라 로드속도가 어느정도 달라질수도 있지만 코드분할을 적용하기 전과 적용 후의 로드 속도는 분명 차이가 난다.

Code Splitting 적용 후 초기 로드 속도

 

 

2. 번들(webpack) 사이즈 최적화

번들 사이즈 최적화에 앞서 필요한 도구를 설치해야한다. 나의경우 webpack-bundle-analyzer를 활용하였다.

npm i webpack-bundle-analyzer -D

 

설치가 완료되었으면 vue.config.js에 셋팅을 해준다.

 

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = defineConfig({
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()],
  },
});

 

이제 build를 하면 번들링된 파일과 크기를 볼 수 있다.

 

 

빌드 후 생성된 파일의 크기는 802.28KB이다. 그중 lodash에서 71.43KB의 크기를 차지하고있기 때문에 크기를 줄여야겠다. 그런데 궁궁한게 생겼다. 분명 트리쉐이킹이 될텐데 lodash라이브러리는 트리쉐이킹이 되지 않는것 같다.

 

변경 전 코드는 아래와 같다. 이때의 lodash의 크기는 71.43KB이었다.

import { throttle } from "lodash";

 

변경 후 코드는 아래와 같다.

import throttle from "lodash/throttle";

변경 후 lodash의 크기는 2.96KB로 줄어들었다.

이 작업만으로도 빌드 후 생성된 파일의 크기가 802.28KB => 733.58KB가 되었다.

수정 후 lodash의 크기

 

3. 코드 분할(Code Splitting)

코드 분할은 앞에서 말한것과 같이 SPA에서 초기 로딩시 웹 리소스를 한번에 받지 않기위해서 하는 작업이다. 나의경우 라우터에 적용하여 사용자가 페이지를 이동시 이동한 페이지에 맞는 리소스를 받도록 하였다.

 

=> 웹사이트에 페이지가 10개라고 하였을 때 처음 접속하자마자 쓰지도 않을 나머지 9개의 페이지에 대한 정보를 받아오는것 보다는 특정 화면으로 이동할 때마다 페이지에 내용을 불러오는것이 로딩 속도 측면에서 효율적이기 때문이다.

 

코드 분할(Code Splitting)은 지연 로딩(Lazy Loading) 방법을 적용하며 Dynamic Import를 활용하여 구현할 수 있다.

방법은 아래와 같다.

const routes = [
	{
    path: '/sign-up',
    name: 'sign-up',
    component: () => import('./SignUpPage.vue')
  },
	{
    path: '/main-page',
    name: 'main-page',
    component: () => import('./MainPage.vue')
  },
];

new VueRouter({
	mode: 'history',
	routes: routes,
});

 

4. 이미지 Lazy Loading

브라우저는 페이지의 초기 로딩 시 필요한 이미지들을 다운로드 받는데 Lazy Loading 기법을 이용하면 이미지가 뷰포트 안에 들어왓을 때 이미지를 다운로드 한다. 그렇기 때문에 초기 로딩시간이 단축된다.



나의 경우 UI 라이브러리인 Vuetify를 사용하고있는데 v-img 태그에 lazy-src 속성을 활용하여 작업할 수 있었다.

https://vuetifyjs.com/en/components/images/#usage

Vuetify — A Vue Component Framework