Vite에서 빌드할 때 html파일 경량화(minify) 시키기

뷰나 리액트 등 이용한 개발시 Vite를 사용하는 경우가 많이 있습니다.
이 경우 프로젝트를 빌드할 때, index.html 등 html파일의 빌드 결과물이 minify되도록 하는 방법을 알아보겠습니다.

1. vite-plugin-html 플러그인을 설치합니다.

   npm 설치

   npm i vite-plugin-html -D

   yarn 설치

   yarn add vite-plugin-html -D

2. vite.config.js (타입스크립트 사용시 vite.config.ts)를 열어줍니다.
3. 아래와 같이 vite-plugin-html을 import해 주고, 필요한 옵션을 plugins 내에 추가해 줍니다.

   import { fileURLToPath, URL } from 'node:url';
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import { createHtmlPlugin } from 'vite-plugin-html';    // vite-plugin-html 임포트
   // https://vitejs.dev/config/
   export default defineConfig({
   // plugins 안에 createHtmlPlugin(옵션) 추가
   plugins: [vue(), createHtmlPlugin({ minify: true })],
   resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
   },
   ...
   });

제 경우 Vue 3 + Vite 환경이기 때문에 plugins 내에 vue()가 포함되어 있고
상단에 마찬가지로 vue가 임포트되어 있기 때문에 작업중이신 프로젝트에 맞게 필요한 부분만 세팅해 주시면 됩니다.

4. npm run build 를 실행하면 경량화(minify)된 html파일을 확인하실 수 있습니다.