vite.config.js 설정 (1)

https://vitejs-kr.github.io/guide/why.html#the-problems

Vite를 사용해야 하는 이유 | Vite

vite 방문 하면 첫 페이지에 사용해야 하는 이유가 딱 쓰여져 있습니다.

브라우저에서 ESM(ES Modules)을 지원하기 전까지는, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었습니다. 딸라서 개발자들은 '번들링' 이라는 우회적인 방법을 사용할 수 밖에 없었습니다. 

*번들링 : 모듈화 된 소스 코드를 브라우저에서 실행할 수 있는 파일로 한데 묶어 연결해주는 작업

.... 하지만 말그대로 1000개 10000개의 JavaScript 모듈이 있는 거대한 프로젝트라면 어떨까요? 실제로 이러한 상황을 어렵지 않게 마주 하고 있습니다.

이러한 상황에서 보다 빠르게 퍼포먼스를 내주는 vite 사용하지 않을 이유는 없겠지요?

vite를 사용하면서 발생했던 여러분들도 곧 마주할 Error 및 오류 부분 들을 소개 해 드립니다. ㅋㅋ

(그냥 제가 업무하면서 나중에 까먹을까봐 메모하는 거에요)

그럼 제일 쉬운 설정부터 시작해서 적어 보겠습니다.

참고할 사항은 저는 vue3 프로젝트에 vite 사용 하였습니다.

1. 배포버전의 console.log 제거

프론트엔드 개발을 진행 하면서 개발자 분들이라면 console.log는 디버깅 용으로 또는 값 확인 용으로 정말 많이 사용 하곤 합니다. 하지만 개발 할 때 여기저기 막 남발한 console.log를 개발 다된 시점에 배포할때 하나하나 찾아서 삭제 할려면 ..... ..... ;;;;; 그러다 한두개라도 중요정보 관련 log를 남기면 .... .... 그땐 정말 ..... ..... 

그럼 확인하고 삭제 하고 확인하고 주석 하고 그것 또한 귀찮은 일입니다. 정말 꼼꼼하게 삭제 해야 하며 다시 수정하거나 하면 로그를 또 다시 여러번 찍어봐야 하는 일들이 생깁니다. 

그럼 이런생각을 하게 됩니다. 개발할때 맘편히 로그 찍고 배포할때 한번에 처리하는 방법이 있다면 실수 없이 배포할때는 그냥 모든 console.log를 제거 해주는 기능이 있다면 얼마나 좋을까 하고 ㅋㅋ 네 있습니다. 

이제 설정 들어가지요 vite.config.js 에 아래와 같이 

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  //build 시에 모든 console.log를 제거
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }

})

네 끝났습니다. 고생하셨어요 ^^

이렇게 간단하게 로그를 제거 할 수 있습니다.

로컬 개발 콘솔

서버 배포 콘솔

말그대로 아무런 로그도 없습니다. ㅋㅋ 

2. Router dynamic 하게 사용 할 때

개인 프로젝트 이외의 실제 프로젝트에서 Router를 전부 하드 코딩해서 설정해서 사용 하는 경우는 없다고 생각합니다. 로컬에서 개발 테스트 진행할때 잘 작동하던 dynamic router가 build 후 배포하면 작동이 안될 때 정말 당황 스럽습니다. (자기소개 하기 !!) 원일을 찾는데 아무리 찾아도 답이 나오지 않아 정말 힘들 었습니다. 그렇게 헤매고 있다과 vite 가이드 문서를 보면서 차분한 마음으로 테스트 여러 번에 성공 했습니다. 이전 코드와 변경된 코드 아래에 첨부 합니다. 작업하시면서 비슷한 오류 나타나면 참조 하시길 바랍니다. 

처음 작성한 dynamic router 

- dynamicRoutes.js

export default (paths) => {
  //route 형식 만들기
  const routes = []
  for (const { menuName, menuComponent, menuPath } of paths) {
      routes.push({
        path: `${menuPath}`,
        name: `${menuName}`,
        component: () => import(`@/views/${menuComponent}.vue`)
      });
    }
  return routes
}

- dynamicRoute.js 에서 router에 add 해주면 끝

const routes = dynamicRoutes(resultData);
for(let index; index < routes.lenth; index++) {
	router.addRoute(routes[index]);
}

수정 한 dynamic router

- dynamicRoutes.js

export default (paths) => {
  //route 형식 만들기
  const routes = []
  for (const { menuName, menuComponent, menuGroup, menuPath } of paths) {
      routes.push({
        path: `${menuPath}`,
        name: `${menuName}`,
        component: `${menuGroup}/${menuComponent}.vue`
      });
    }
  return routes
}

- dynamicRoute.js 에서 import.meta.glob 함수를 이용해 모듈을 한 번에 가져올 수 있게 처리

const routes = dynamicRoutes(resultData);
const modules = import.meta.glob('../views/main/*/*/*.vue');
routes.forEach((item) => {
	// debugger
   if (item.path) {
   		const route = {
        path: item.path,
        name: item.name,
        component: modules['../views/main/' + item.component],
   		}
      router.addRoute(route);
   }

* 주의사항 import.meta.glob('../view/main/*/*/*.vue') 이부분 패턴이 위에 component : `${menuGrop}` 이부분이랑 

main/하위폴터/하위의하위폴더/vue 파일 이렇게 이해가 안되면 댓글로 ....

https://vitejs-kr.github.io/guide/features.html#glob-import

오케이 오늘은 여기까지