Vite 소개

번들러 사용 이유

• 웹을 구성하는 파일들 용량이 크다. node_modules → 실제 필요한 코드만 합쳐줘서 용량 절약

• ESM 방식 사용 시 문제, import/require 문법 브라우저 친화적X → js 파일 하나로 만들기 때문에 모듈 로더가 필요 없다.

• html 파일에서 script 태그로 여러 자바스크립트 파일을 로드하지 않아도 된다.

CRA, 웹팩과 비교

Vite 개념 및 특징

• Vite는 프랑스어로 빠르다는 의미

• 원래 Vue 전용 빌드툴이었지만 현재는 범용적으로 사용되고 있다.

• 빠른 dev 서버 시작과 빠른 모듈 교체를 특징으로 내세운다.

• Dependencies(패키지)와 Source Code(소스 코드)를 분리하여 빌드한다.
• 소스 코드는 빈번하게 바뀌지만 패키지는 설치 후에는 내용이 바뀌지 않기 때문이다.
• npm package 이용한 웹 개발 시 의존성 패키지 소스코드를 esbuild를 써서 빠르게 pre-bundling 해준다.
• 패키지는 esbuild로 사전에 번들링 해놓고, 로컬에서 개발 서버를 띄우면, 소스 코드를 불러오면서 의존성이 있는 패키지만 가져온다.
• 한 번 빌드한 결과는 캐싱을 해두어 다음 개발 빌드 때 바로 사용한다.
• 소스코드의 경우 Native ESM 방식을 이용하고 있다. vite는 그저 브라우저의 판단 아래 특정 모듈에 대한 소스 코드를 요청 받으면 이를 전달할 뿐이다.

• es6 modules문법과 HMR 이용해서 실시간 미리보기 기능도 편리하게 해준다.
• 실제 코드 변경 시 반영된 화면을 빠르게 확인할 수 있어 개발자 경험이 향상된다.

Vite으로 프로젝트 시작하기

npm create vite@latest

Project name: vite-pjt
Select framework:
 - React 
 - Vue

Vite.config.js 설정하기

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  },
});

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import { createHtmlPlugin } from 'vite-plugin-html';
import path from 'path';

export default defineConfig(({ mode }) => {

  return {
    server: { hmr: true },
    plugins: [
      react({
        include: ['**/*.tsx', '**/*.ts'],
      }),
    ],
    resolve: {
      alias: { '~': path.resolve(__dirname, './src') },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "./src/assets/scss/style.scss";`,
        },
      },
      postcss: (ctx) => ({
        parser: ctx.parser ? 'sugarss' : false,
        map: ctx.env === 'development' ? ctx.map : false,
        plugins: {
          'postcss-import': {},
          'postcss-nested': {},
          cssnano: ctx.env === 'production' ? {} : false,
          autoprefixer: { overrideBrowserslist: ['defaults'] },
        },
      }),
    },
    build: {
			build.outDir: path.resolve(__dirname, 'dist') // 기본값 dist, 생략 가능
      sourcemap: false,
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['react', 'react-router-dom', 'react-dom'],
            ...renderChunks(dependencies),
          },
        },
      },
    },
  };
});