회사 vue 프로젝트 vite 적용하기

Vue Study

회사 vue 프로젝트 vite 적용하기

eddie0329 2022. 1. 1. 19:26

📌 목차

요약
서론
vite란?
vite 회사 프로젝트 적용하기
결론

📌 요약

	기존	vite 적용후
build time	34897ms	548ms
re-build time	3310ms	100ms 이하

📌 서론

개인 프로젝트에서 vite를 사용하면서 느꼈던 장점들을 토대로 회사 프로젝트에 적용을 해보았습니다. 기존에 있는 프로젝트를 vite를 적용 하면서 힘들었던 점들과 그것을 어떻게 해결했는지를 기술을 하는 글 입니다.

그럼 재밌게 읽어주세요! 😎

📌 vite 란?

먼저 들어가기 전에 vite가 생소하실거 같아 간략하게 vite에 대해 설명해보겠습니다.

vite는 바이트 라고 읽지 않고 비잍라고 읽어야 한답니다. (빠르다는 뜻의 불어라서 이렇게 읽어야합니다.)
그리고 vite는 기존 webpack, rollup, parcel 과 같은 bundler 라고 보시면 됩니다.
다른 툴과는 다르게 훨씬 더 빠르게 server를 시작하고 hot-module-replacement가 빠릅니다. 왜그럴까요?

vite가 여타 다른 툴보다 빠른 이유

vite가 빠른 가장 큰 이유는 브라우저가 ES modules를 지원함에 따라서 일반적인 번들링 과정을 생략하게 되어 그렇습니다.

기존:

ES module를 활용한 방법:

그림을 보시면 기존에는 모든 파일을 번들링을 한 후에나 서버가 시작이 됩니다. 하지만 변경된 방법은 서버만 시작한 뒤에나 파일이 떨어집니다. 그래서 훨씬 빠른 dev-server가 가능하게 됩니다.

📌 vite 회사 프로젝트 적용하기

회사 프로젝트에 적용하기에 앞서 회사 프로젝트에 대해 설명을 하자면 일반적인 vue framework 나 mono-repo와는 조금 다르게 환경이 설정이 되어있습니다.

vue를 사용하긴 하지만 vue를 통하여 ssr이 가능하게 되는 형태를 사용하고 있습니다.
mono-repo의 형식을 가지고 있지만 실제로는 분리 되어있는 shared 폴더를 복사해서 가져온 뒤 혹은 alias로 프로젝트가 실행되게 됩니다.

이에 따라 어려웠던 점들과 적용 방향은 다음과 같습니다.

build는 webpack을 사용하지만 dev-server는 vite를 사용할것
env.local 파일 관리
dynamic import
.vue 익스텐션 처리
import.meta 처리
hmr 처리

그럼 이제 각 항목을 자세하게 살펴볼까요?

1. build는 webpack을 사용하지만 dev-server는 vite를 사용할것

왜 굳이 두개를 사용한다고 물으신다면 위에 말씀 드렸던 회사 프로젝트의 특수성때문에 그렇습니다. ssr를 지원해야하는데 vite의 ssr지원이 아직 experimetal 단계이기 때문에 그렇습니다. 그렇기 때문에 vue.confie.js를 그냥 나둔 상태에서 vite.config.js를 만들게 되었습니다.

그래서 기존 vue.config.js가 하는 방향과 동일하게 vite.config.js를 설정해주었지만 몇가지 세팅을 더해주어야 했습니다.

export default defineConfig(({ mode, command }) => {
  return {
    define: {
      // 로컬에서만 vite를 사용하기 때문에 ssr을 할필요가 없음에 따라 해당 변수를 false로 해줌
      'TARGET_NODE': false,
      // webpack의 hot-reloaded를 사용하고 있기때문에 해당 변수를 빈 object로 설정
      'module': {}
    },
  };
});

2. env.local 파일 관리

vite의 default mode는 development 입니다. 그리고 local은 막혀져 있습니다.(+ 자동적으로 .env.local 파일이 추가 됩니다.)
.env.local이 이미 존재하기 때문에 해당 mode를 local로 해주어야하지만 막혀져 있는 상황이라 해결해야만 했습니다.

생각한 방법은 두가지 방법이 있었습니다.

vite 전용 .env.local 같은 파일을 만듬(ex> .env.viteLocal, --mode=viteLocal)
mode를 이상하게 주어서 .env.local 파일만 자동 임포트를 하게 함

1번 방법은 이미 .env 파일이 5개(.env, .env.local, .env.development, .env.stage, .env.production)나 있는 상황 이었고 .env.local을 변경한다면 .env.viteLocal도 변경을 해주어야하는 번거로움이 있어서 2번 방법으로 해결을 하였습니다.

따라서 최종적으로 이런 명령어가 탄생하게 됩니다.

vite --mode eddie_is_the_best

3. router dynamic import

보통 router에 dynamic import를 할때 이런식의 factory 함수로 많이 씁니다.

const view = path => () => import(/* webpackChunkName: "arena" */ `@/views/pages/arena/${path}`);

하지만 이경우 alias가 이미 붙어 있기 전이라 @를 읽을수가 없습니다. 이에 따라 이렇게 변경을 해주었습니다.

const view = path => () => import(/* webpackChunkName: "arena" */ `../views/pages/arena/${path}.vue`);

4. .vue 익스텐션 처리

이부분이 가장 걸렸던거 같아요. vite에서는 이제 extension을 직접 입력하는 방식으로 변경이 됩니다. .js외의 모든 파일들을 import 할때 이제 extension을 붙여 줘야합니다. (ex> .vue)

안붙여 주면 이렇게 못찾는 다는 에러가 뜹니다.

그래서 처음에는 그냥 자동적으로 해결하는 방법을 택했었습니다. 하지만 이내 이런글을 보게 됩니다.

그렇습니다. 자동으로 extension을 붙여주는게 legacy로 남게 될것이고 누군가는 이 legacy를 해결해야 하는 문제가 있었습니다.
그래서 그냥 붙여줘야한다고 판단이 들었습니다.

네 그렇습니다. 노가다를 했습니다.(약 2000개의 파일들 모두 찾아다니면서 붙여줬습니다. 😭) 처음엔 인텔리제이의 힘으로 정규식으로 한번에 붙여보려고 했지만 .js 인지 다른 extension인지 판단을 할수가 없어 직접 붙여줬습니다.

5. import.meta 처리

~~vite는 import.meta에 관한 처리가 가능하지만 webpack은 가능하지 않습니다. 때문에 webpack loader를 추가 시켜주었습니다.~~

import.meta 처리가 production 모드 일 때 빌드가 실패하여 다음과 같이 코드를 수정하였습니다.

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="/favicon.ico">
</head>
<body>
<div id="app"></div>
  <!-- built files will be auto injected -->
  <script type="module" src="/src/vite-hmr.js"></script> // 삽입!
</body>
</html>

🚧 해당 html파일은 vite 전용이기 때문에 webpack 일때는 접근을 하지 않습니다.

vite-hmr.js는 아래에서 설명하겠습니다.😎

6. hmr 처리

기존에 asyncData는 webpack.module.hot에서 신호를 받아 처리를 해왔습니다.

if (process.env.NODE_ENV === 'development' && module && module['hot']) {
    /** @type {{ addStatusHandler: (callback) => void }} */
    const hot = module['hot'];
    hot.addStatusHandler(status => {
      if (status === 'idle') {
        Vue.nextTick(async () => {
         // ... 여기서 asyncData 처리를 해주고 있음
          }
        });
      }
    });
  }

동일하게 vite의 hmr도 처리를 해주어야 했습니다.

하지만 해당 처리는 vite:beforeUpdate 이후여야 하기 때문에 plugin을 하나 만들어 주었습니다.

import { HmrContext } from 'vite';

const customHmrHandler = () => ({
  name: 'customHmrHandler',
  /**
   * @param {HmrContext} obj
   */
  handleHotUpdate({ server }) {
    setTimeout(() => {
      server.ws.send({
        type: 'custom',
        event: 'deferred-updated',
        data: {}
      });
    }, 250);
  },
});

export default customHmrHandler;

이제 이걸 vite.config.js에 연결 시켜놓았습니다.

import customHmrHandler from '../../shared/vitePlugins/customHmrHandler';

export default defineConfig(({ mode, command }) => {
  return {
    plugins: [customHmrHandler()]
  }
}

그리고 이제 신호만 받으면 됩니다.

// vite-hmr.js
if (import.meta.hot) {
    import.meta.hot.on('deferred-updated', () => {
        Vue.nextTick(async () => {
          // ... 여기서 asyncData 처리
          }
        });
    });
  }

이부분을 추후에 다시 고민을 해봐야 할거 같습니다. 일단 계속 찾아보고 코드도 열심히 찾아봤는데 after updated를 받을 수 있는 event가 없었습니다. 그래서 일단 vite.js에 issue로 해당 기능을 구현요청을 해놓은 상태입니다. 해당 ISSUE 바로가기

📌 결론

이제 훨씬 빠르게 개발을 할수 있게 되었습니다.

	기존	vite 적용후
build time	34897ms	548ms
re-build time	3310ms	100ms 이하

기존 코드도 리뉴얼을 한번 해서 많이 빌드 타임을 낮춘 상태였지만 이것으로 만족을 할수 없었습니다.
저는 조금의 기다림이 없는 그런 개발 환경을 추구합니다.
이 문제는 생산성과 직접적인 연관이 있는 문제라 꼭 해결을 하고 싶었고 vite로 해결을 해보았습니다.

그럼 긴글 읽어주셔서 감사합니다. 🙇🏻‍♂️