[Vue] Vue 프로젝트 성능 개선을 위한 작업 여정 기록!

진행 중이던 프로젝트의 런칭을 앞두고,, lighthouse 를 이용해서 성능 테스트를 진행해보았는데, 이를 개선한 과정을 나중에도 활용하기위해 기록해보려고 한다.

1. 비동기 컴포넌트 import

// 기존 컴포넌트 import 방식
import WAddChartModal from './modal/AddChartModal.vue';

• 기존의 방식은 현재 페이지를 구성하는 모든 컴포넌트를 불러오는 방식으로, 프로젝트의 규모가 커질 수록 성능이 저하될 수 있다고 한다.

// 비동기 컴포넌트 import 방식
const WAddChartModal = defineAsyncComponent(() => import('./modal/AddChartModal.vue'));

• 그래서 vue에서는 defineAsyncComponent 함수를 제공해, 필요할 때만 서버에서 컴포넌트를 로드할 수 있게 해준다.

2. 라이브러리 내에 필요한 것만 import

import * as lodash from 'lodash';
import * as elementPlus from 'element-plus';
import highcharts from 'highcharts';

• 개발하다보면 프로젝트 내에 수 많은 라이브러리들이 함께 뒤섞여 쓰이게 되는데, 위와 같이 라이브러리 전체를 import 해서 가져오는 방식은 권장되지 않는다고 한다.

import { cloneDeep } from 'lodash';
import { ElRow } from 'element-plus';

• 따라서 한 폴더 별로 필요한 컴포넌트 or 함수 등을 개별 import 해서 사용하는 것이 성능 측면에서 좋다고 할 수 있다.