Vue Cli로 만든 Vuejs 프로젝트 최적화 하기

1. main.js를 Slim하게 하기

main.js는 처음 개발 시작 간, 정리를 하지 않으면 나중에 힘든일이 발생하게 된다. 이게 무슨 말이냐 하면, 가장 처음에 시작하는 스크립트 파일은 main.js 에 개발의 편의성을 위하여 자주 사용하는 컴포넌트나 스크립트들을 로드하게 된다. 이 경우, 첫 시작부터 자바스크립트 엔진이 많은 스크립트들을 실행하다 보니 초기 로딩시간을 늘리게 한다.

대표적으로 lodash와 같은 것과 UI를 빠르게 구성하기 위해서 사용하는 Vuetify나 Element-UI, 차트를 구성하는 echart 등, 무거운 라이브러리를 Fully하게 등록하는 경우다. 이런 것들은 초반부터 사용하는 페이지 별로 사용하게 적용하는 것이 좋다.

2. Lazy Loading을 구성하자.

구관이 명관이라는 말이 있다. jquery 기반의 예전 library 중 스타일만 고쳐도 잘 쓸 수 있는 것들이 많다. 요즘 Vue로 Wrapping 된 것들도 있지만, 원래 기존 가지고 있는 기능들을 다 제공하는 경우는 드물고, 실제 커스터마이징을 해서 사용할 경우는 직접 도입하는 것이 좋다. (가령, 이벤트 처리들이 발목 잡는 경우가 많다.) 이때, import가 되지 않는 것들이 은근히 많다. 이럴때는 지연 로딩을 따로 스크립트로 구성하여, 차후 이벤트 핸들링을 통해 로딩 시점을 잡아주는 것이 좋다.

scriptLoader(url, key) {
  return new Promise((resolve, reject) => {
    // const existing = document.querySelector('script#someUniqueId')
    // 차후 이벤트 핸들링을 위해 각 스크립트 별 고유 값을 가지고 Control 하기 위함.
    const existing = document.querySelector('script#' + key)
    if (existing) existing.remove()
    const script = document.createElement('script')
    script.onload = () => {
      // 로딩이 완료되면 Callback 처리. Callback에서 추가 로직 혹은 로딩 완료 이벤트를 발생
      resolve()
    }
    script.onerror = e => {
      reject(e)
    }
    script.id = key
    script.async = true
    script.defer = true
    script.src = url
    document.head.appendChild(script)
  })
}

3. Vue-router에서 가이드 준대로 잘 나누자.

Vue Cli로 작업 구성하면, Vue-router 항목에는 about 부분 지정을 아래와 같이 구성되어 있다.

{
  path: 'about',
    name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
      import(/* webpackChunkName: "about" */ '@/views/About.vue')
}

이건 build가 된 이후, 이 Router와 연결된 Component를 따로 파일을 구성하여 만드는 것이며, 초기 로딩 때, 이 페이지는 다운 대상이 되지 않고, 이 Route(주소)로 들어가야 이 파일을 다운받아 처리한다. 즉, 서비스 페이지가 많아진다면 필수적으로 고려하여 적용해야 한다는 것이다. 참고로 webpackChunkName: "about" 이 부분 명칭이 같으면 같이 지정한 컴포넌트 끼리 같은 파일로 구성된다.

4. vue.config.js 설정 추가

module.exports = {
    productionSourceMap: false
}

운영 환경으로 빌드되어 올라갈때 필수적으로 넣어야 하는 옵션. .map 파일을 만들지 않아 빌드도 더 빨리 진행한다.