[vite] 프론트엔드 개발자를 위한 Vite 101

🧑‍🏭️ Vite 는 Esbuild + Rollup 으로 만들어진 차세대 프론트엔드 개발 도구입니다.

vite 는 프론트엔드 개발환경에 필요한 config 를 모두 제공하고있는 빠르고, 간단한 no-configuration 툴입니다.

기존의 번들러 기반의 도구들은, 개발서버를 다시 시작할 때 콜드 스타트를 합니다.
이렇게 되면 모든 소스코드에 대한 크롤링과 빌드작업이 필요하며, 프로젝트 규모가 커진다면 개발 서버를 가동하는데 비합리적으로 오랜 시간이 걸립니다. vite 는 모듈을 dependencies 와 source code 두 카테고리로 나누어 이문제를 해결하였습니다.

(1) Dependencies 는 다운받은 외부 패키지입니다. 즉, node_modules 패키지들을 말하는데, 이것들은 개발자가 변경하지 않는 영역임으로, 번들링 할 때 마다 매번 평가할 필요가 없는 요소들입니다. vite 는 이 패키지들을 모두 Esbuild 를 사용하여 사전 번들링합니다.

👍 사전 번들링을 통해서 CommonJS, UMD 모듈을 모두 ESM 으로 전환합니다.

Esbuild 는 간단히 소개하자면, Go 로 만들어진 번들링 툴입니다. 자바스크립트의 언어적 한계를 넘어 빌드 속도가 10~ 100배 빠른 장점이있지만, code splitting, css 처리, es5 이하 문법 처리 등 이것저것 안정성 문제가 잔재합니다. vite 는 개발환경시에만 빠른 빌드용도로 이것을 사용하고, 최종 빌드시에는 안정적인 Rollup 을 사용합니다.

(2) Source code 는 개발자가 작성하는 코드입니다. 이부분은 자주 변경되는 사항입니다.

앞서 사전에 번들링한 패키지들과 구분하기 위해서 vite 는 브라우저의 Native 모듈인 ESM 을 기반으로 패키지들과 소스코드를 분리합니다. 그리고 자주 변경되는 Source code 영역을 하나의 ESM 모듈로 제공함으로써 단독적으로 브라우저에게 변경사항을 제공할 수 있습니다.

🏭 최종 빌드에는 Rollup 을 사용하는 이유

Esbuild 는 현재 어떤 번들링 툴 보다 가장빠른 성능을 자랑하지만 아쉬운 생태계와 브라우저용 번들링에서 아직은 다른 툴보다 안정성이 떨어진다는 평가가 있어 안정성과 생태계가 비교적 더 큰 Rollup 을 선택하였습니다.

결과적으로 유연하고 방대한 생태계를 적극 채용함으로써 vite 가 성공할 수 있었다고 말하고있습니다.

그렇지만 esbuild 도 해를 거듭하며 발전하고있고, 그 장점이 많기 때문에 점차 빌드에 도움한다고 합니다.

✍️ Vite 가 지원하는 기능

vite 는 단순히 네이티브 ESM 외에도 다른 번들러가 제공하는 대부분의 기능을 지원합니다.

node_modules 지원

아래 코드는 ESM 에서 에러가 발생합니다.

import dayjs from 'dayjs';

dayjs 모듈위치를 찾을 수 없기 때문인데요.

익숙하게 사용하는 npm 모듈을 사용할 수 있는 이유는 node 환경의 commonjs 모듈을 사용하고 있었기 때문입니다.

이를 ESM 에서 그대로 반영하기 위해서는 node_modules 의 모든 패키지를 개발서버에서 클라이언트로 제공해줘야합니다.

vite 는 Esbuild 로 node_modules 의 모든 패키지를 사전 번들링하여 아래와 같이 serving 하고 캐시합니다.

/node_modules/.vite/deps/dayjs.js?v=b09621d8

Hot Module Replacement

vite 는 기본적으로 ESM 을 통해서 hmr 을지원하고 있습니다.

아무 설정없이 개발 서버를 실행해도, 새로고침 없이 반영이됩니다.

react, vue 와 같은 프레임워크의 경우 별도의 플러그인을 제공하고 있으며, 이또한 각 프레임워크 플러그인에 내장되어있어, 별도의 설정이 필요없습니다.

Typescript

vite 는 .ts 파일 컴파일 및 import 를 기본으로 지원합니다.

html 파일에서도 가능하며 아래와 같이 사용할 수 있습니다.

<body>
    <h1>Hello Vite!</h1>
    <script src="src/index.ts" type="module"></script>
</body>

단, 트랜스파일링만 수행합니다.

이는 다른 번들러도 마찬가지로, 트랜스파일링만 하는 경우가 많고, 타입 체크는 IDE 기능을 사용하고, build 타임에만 체크하는 경우가 많습니다.

타입 체크를 한다는 것은 전체 모듈 그래프에 대한 탐색이 필요한 작업이기 때문에, vite 의 속도 이점도 사라지게 될 뿐 아니라, 다른 벌들러도 마찬가지로, 프로젝트 규모가 커질수록 타입체킹에 소비되는 시간이 커지기 때문에 이러한 정적 검사는 번들링 파이프라인에서 분리하는 것이 권장됩니다.

타입 에러를 브라우저에서 확인 하는 플러그인으로 vite-plugin-checker 권장하고 있습니다.

vite 에서 typescript 는 Esbuild 를 사용하고있고, tsc 대비 20~30배 빠른 포퍼먼스를 보이고 있습니다.

그리고 타입만 가져오는 경우 잘못 번들링 되는 경우가 있는데, 타입전용 imports, exports 를 사용하여 우회할 수 있습니다.

import type { T } from 'only/types'
export type { T }

⚠️ typescript 컴파일 옵션 주의사항

isolatedModules : true

Esbuild 는 타입에대한 정보 없이 변환만을 수행하기 때문에, enum 혹은 암시적인 타입 import 가 지원되지 않습니다.

이는 개발자가 실수할 수 있는 부분이라, 이옵션을 true 로 설정하여 방지하는 것이 좋습니다.

skipLibCheck : true

위 설정을 true 로 했을 시 vue 는 타입체킹이 정상적으로 되지 않는 버그가있습니다. vue 를 사용한다면 이옵션을 true 로 체크해야합니다.

useDefineForClassFields : true

vite 는 typescript 변환 대상이 ESNext or ES2022 인 경우 기본값을 true 로 설정합니다. 이는 tsc 및 ECMAScript 표준을 따르도록 하기 위함입니다.

이것도 지원하느 것에 맞춰서 알아봐야 하겠지만 알려진 것으로는 lit-element 라이브러리는 false 로 설정해야만 합니다.

⌨️ Client Types

vite 가 client 에게 주입하는 type 을 2가지 방법으로 추가해 줄 수 있습니다.

- .svg 등을 비롯한 에셋 import 타입

- import.meta.env 환경변수 타입

- import.meta.hot 의 HMR API 타입

(1) *.d.ts 선언 추가

/// <reference types="vite/client" />

(2) tsconfig.json 에 명시적으로 추가

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

다른건 몰라도, .svg 와같은 에셋 import 는 수정할 경우가 있습니다.

예를들어서 React 에서 .svg 파일을 import 할때 react component 로 import 한다고 하면, 기본동작을 수정해야합니다.

// vite-override.d.ts
declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGElement>>
  export default content
}


// d.ts 파일
/// <reference types="./vite-env-override.d.ts" /> // vite/client 위에 선언
/// <reference types="vite/client" />

💡 JSX 지원

기본적으로 .jsx, .tsx 를 Esbuild 로 컴파일링 합니다.

아래 3가지 옵션을 줄 수 있으며, vite 에서만 제공하는 jsxInject 도 사용하능합니다.

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: `import React from 'react'`,
  },
})

💡 CSS

- .css 파일은 HMR 을 지원하며, <style> 태그로 html 에 주입됩니다.

- vite 는 @import, url() 구문을 postcss-import 를 이용해 처리합니다. ( process.pwd() 로 치환하여 local 에 있는 에셋을 참조하도록 합니다)

- Esbuild 를 통해 css 축소를 지원합니다.

PostCSS 기본 지원

프로젝트에 postcss 설정파일이 존재한다면, vite 모든 css 파일에 적용합니다.

참고로 css 최적화는 PostCSS 이후에 진행됩니다.

CSS Modules

.module.css 확장자는 css 모듈 로 취급합니다.

CSS 전처리기 지원

.scss, .sass, .less 와 같은 css 전처리기는 패키지 설치만 하면 바로 사용이 가능합니다.

vue 의 경우 <style lang="sass"> 이런식으로 설치 후 lang 만 설정해주면 바로 적용됩니다.

npm add -D sass
npm add -D less
npm add -D stylus

페이지에 CSS 주입 비활성화

?inline 쿼리를 추가하면, html 에 <style> 로 주입되지 않고, import 만 합니다.

import './styles/index.less?inline';

💡 Static assets

정적 에셋을 import 하는 경우 다양한 쿼리 매개변수로 어떻게 가져올지 정할 수 있습니다.

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

// URL로 에셋 가져오기
import assetAsURL from './asset.js?url'

// String 타입으로 에셋 가져오기
import assetAsString from './shader.glsl?raw'

// 웹 워커 가져오기
import Worker from './worker.js?worker'

// Base64 포맷의 문자열 형태로 웹 워커 가져오기
import InlineWorker from './worker.js?worker&inline'

webpack 의 file-loader 와 비슷한데, vite 는 절대경로와 상대경로 모두 사용가능하며, 자동으로 분석하여 번들파일에 올바른 위치로 포함시킵니다. 아래 코드는 둘다 결국 /assets/bg.png 로 번들링되고 값도 적절히 바뀝니다.

<img src="./public/bg.png" alt="">
<img src="/bg.png" alt="">

- assetsInlineLimit 옵션의 값보다 작은 에셋의 경우 에셋을 그대로 복사하지 않고, Base64 포멧의 데이터 URL 문자열로 파싱합니다.

- 🙏 Typescript 의 경우 정적 에셋을 import 하기 위해서는 `vite/client` 타입을 추가해줘야합니다.

- public 폴더의 에셋들이 번들파일의 루트경로에 그대로 복사되며, `publicDir` 옵션으로 변경할 수 있습니다. 이 경우는 페이지별로, 혹은 타 서비스에 일부분으로 배포하는 경우 유용합니다. ( githubPages ... etc)

💡 JSON

.json 은 별도 처리없이 import 가능하고, 필트를 지정해 가져오면 트리쉐이킹을 지원합니다.

// 객체 형태로 가져오기
import json from './example.json'
// 필드를 지정해 가져오기 (트리 셰이킹 됩니다.)
import { field } from './example.json'

💡 동적 import

좀더 디테일한 긴으은 Glob Import 를 사용할 수 있지만, 간단히 동적 import 는 직관적으로 사용할 수 있습니다.

다만, file 의 depth 는 1이 최대라는 점입니다. 예를들어 `foo/bar` 와같이 2 depth 라면 Glob Import 를 사용해야합니다.

const module = await import(`./dir/${file}.js`)

💡 Web Workers

소스코드 내의 workder 파일을 import 지원합니다.

`src/worker.js`

const url = new URL('./worker.js', import.meta.url);
const worker = new Worker(url);

🛠️ 빌드 최적화

vite 는 추가적인 설정 없이 기본적으로 빌드 프로세스에서 최적화를 제공합니다.

css code splitting

- import 된 css 파일은 분리되어 <link> 태그로 코드를 불러오도록 합니다.

- 만약 비동기 import 에 포함된 css 라면, css 가 모두 계산된 이후에 해당 파일을 렌더하도록 하여, CSS 가 깜빡이는 FOUC현상(Flash of unstyled content) 를 방지합니다.

비동기 import 최적화

불러오고자 하는 모듈이 Dynamic Import 를 사용하면, 해당 모듈이 불러오고 나서야, 한번더 네트워크 요청을 통해 필요한 모듈을 또 불러옵니다. 이는 불필요한 네트워크 낭비이며, vite 는 Preload 스텝을 이용해 Dynamic Import 구문도 재작성하여 이런 비동기 Import 시에 필요한 모듈을 한번에 불러오도록 최적화합니다.

💡 캐싱

vite 는 node_modules 를 사전번들링 한다고 했었습니다.

그리고 각각을 /node_modules/.vite 디렉터리에 캐시하고, 개발서버에 제공하고있어요.

개발시 캐싱은 http 헤더에 max-age=31536000, immutable 을 추가하여 다시 다운로드받지 않도록 합니다.

다음과 같은 상황이 아니면 캐시를 유지하면서 빠른 개발서버 속도를 보여줍니다.

- package.lock.json 파일이 변경되는 경우

- 폴더 수정시간이 바뀌는 경우

- vite.config.js 가 변경될 경우

- NODE_ENV 가 변겨될 경우

의도적으로 캐시를 제거할 경우는 --force 옵션과 함께 개발 서버를 재시작 하면 됩니다.

💡 최종 빌드

vite 는 기본적으로 최신 브라우저를 타킷하고 빌드합니다.

ESM, 동적 import, import.meta 를 지원하는 브라우저를 타킷함으로, es2015 이하 버전을 지원하는 바벨과 달리 그 이상만을 지원하도록합니다. 만약 바벨처럼 es2015 버전 이하도 지원하도록 빌드하고자 한다면 @vitejs/plugin-legacy 플러그인을 사용합니다.

빌드 커스터마이징

빌드는 Rollup 을 사용합니다. 커스터마이징 하기위해서 build.rollupOptions 를 수정할 수 있습니다.

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/configuration-options/
    }
  }
})

💡 라이브러리 모드

Rollup 은 라이브러리를 작성하기 최적화된 번들링 도구입니다.

하지만 라이브서버의 부재와 더불어서 실제로 웹에서 사용되는 라이브러리를 개발한다고 하면 별도의 프로젝트 를 생성하여 link 를 통해서 개발해야합니다.

이는 상당히 번거러우며, vite 에서는 웹개발 환경을 타킷으로 한 라이브러리 개발 환경 설정을 포함하고 있어 편리합니다.

리액트기반 라이브러리 설정 예시

build:{
  lib:{
      entry:'./src/lib/index.ts',
      name:'NiceUI',
      fileName:'index'
  },
    rollupOptions:{
        external:['react','react-dom'],
        output:{
            globals:{
                react:'React',
                'react-dom':'ReactDOM'
            }
        }
    }
}
//...
 plugins: [
    react(),
    dts({include:'src/lib/**/*'})
]

build 의 lib 옵션과, rollupOptions 으로 빌드시에 번들링에서 제외할 라이브러리와 이 라이브러리가 사용될 곳 peerDependencies 를 적절히 설정해줍니다.

타입스크립트로 작성한다면 dts() 플러그인을 추가하고, include 속성을 사용하여 개발환경 전체 타입을 생성하지 않도록 해줍니다.(아니면 직접 작성해도 되구요)

관행적으로 라이브러리가 여러개의 모듈을 작성하는 경우가 있기 때문에, 엔트리포인트를 편하게 하나로 잡기 위해서 index 파일에서 필요한 모듈을 모두 모아 다시 export 하는 방식을 사용합니다.

// src/lib/index.ts
export {default as NiceButton} from './NiceButton'

그리고 패키지로 배포할 때는 package.json 설정을 상세히 해주셔야합니다.

vite 는 commonJS, ESM 모듈 두가지를 기본적으로 만들어주기 때문에 두파일을 exports 에 연결해주면 됩니다.

// package.json
{
  "name": "NiceUI",
  "main": "./dist/index.mjs",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }
  }
}

💡 만약 라이브러리 개발을 하는데, 브라우저가 대상이 아니라면 rollup 을 직접 사용하시는 것이 권장됩니다.

💡 Env

환경변수는 dotnev 를 확장하여 다양한 형태로 제공하고있습니다.

.env                # 모든 상황에서 사용될 환경 변수
.env.local          # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수
.env.[mode]         # 특정 모드에서만 사용될 환경 변수
.env.[mode].local   # 특정 모드에서만 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수

env 커스텀 타입 지정

// src/env.d.ts

interface ImportMetaEnv {
    readonly 변수명: string
}

interface ImportMeta {
    readonly env: ImportMetaEnv
}

html 에서 접근 가능

%변수명%

<h1>%VITE_HOST%</h1>

vite 모드에 따라 적절한 환경변수 파일을 사용합니다.

yarn vite : .env.development

yarn build : .env.production

yarn ** --mode 모드 : 모드 직접 지정

🔌 플러그인

vite 는 Rollup 의 플러그인 인터페이스를 기반으로 하는 플러그인들을 사용하여, 기능을 확장합니다.

✨ 호환되는 Rollup 플러그인도 사용 가능합니다(다만 대부분 vite 플러그인으로 지원하고 있으니 먼저 확인해보고 Rollup 플러그인을 찾아보세요)

공식 플러그인

커뮤니티 플러그인

호환되는 Rollup 플러그인

이외에도 npm 에 `vite-plugin`, `rollup-plugin` 으로 검색해서 찾을 수 도있습니다.

플러그인 순서

1. 별칭

2. enforce: 'pre'

3. vite core

4. enforce 값이 없는 플러그인

5. build 플러그인

6. enforce : 'post'

7. 빌드 후 실행되는 vite 플러그인 (minify, manifest, reporting)

Rollup 플러그인 호환

상당한 수의 플러그인 들이 vite 와 호환되지만, 다 그런것은 아닙니다.

Rollup 플러그인의 훅의 경우에 번들되지 않은 개발서버에서는 의미가 없기 때문에, 모두 vite 와 호환되지는 않습니다.

다음 조건에 만족한다면 vite 플러그인으로 사용할 수 있습니다.

- moduleParsed 훅을 사용하지 않는다.

- 번들단계외 훅과 번들 이후 출력 단계의 훅 사이의 강력한 결합이 없어야한다.

위 조건을 충족하지 않아서 사용할 수 없지만, 빌드단계에서 만 사용하는 경우라면 플러그인 사용을 커스텀해서 보강할 수 있습니다.

아래와 같이 enforce 와 apply 를 조정하여 플러그인이 언제 적용될지를 수정해 줄 수 있습니다.

export default defineConfig({
  plugins: [
    {
      ...example(),
      enforce: 'post',
      apply: 'build'
    }
  ]
})

마무리

vite 공식문서 정독을 한 4번째 정도하는 시점에 정리를 해보게 되었네요.

계기가 된것이 webpack 이 편해지긴 했지만, 프론트엔드개발 할때 거의 필수적으로 해아하는 보일러플레이트 량이 꽤나 많더라구요.

아래는 리액트 환경 구축한건데, 이제는 너무 당연해진 것들이 반복적으로 느껴져서 피로감이 들더라구요

const path = require('path');
const { EsbuildPlugin } = require('esbuild-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const webpack = require('webpack');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  entry: path.resolve(__dirname, 'src', 'index.tsx'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
  },
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        loader: 'esbuild-loader',
        options: {
          target: 'es2015',
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  optimization: {
    minimizer: [
      new EsbuildPlugin({
        target: 'es2015',
        css: true,
      }),
    ],
  },
  devServer: {
    port: 3000,
    static: {
      directory: path.resolve(__dirname, 'public'),
    },
    hot: true,
    client: {
      logging: 'none',
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'index.html'),
    }),
    new MiniCssExtractPlugin(),
    new CopyPlugin({
      patterns: [{ from: 'public', to: '.' }],
    }),
    new ForkTsCheckerWebpackPlugin(),
    new webpack.ProvidePlugin({
      React: 'react',
    }),
    isDevelopment && new ReactRefreshWebpackPlugin(),
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

뭐.. 한번 만들어놓고, 복사해가면서 사용해도 되지만 이미 좋은 대안들이 나와있는데 굳이 그럴 필요가 있나 싶은생각이 들었습니다.

Rollup 의 완벽한 commonJS, ESM, UMD 지원 + 이를 기반으로 한 프론트엔드 개발환경 툴인 vite 의 조합은 개발경험이 너무 좋았습니다.

그렇다고 webpack 을 건너띄어도 된다고 생각하진 않습니다. nextjs 와 같이 점유율 1위 프레임워크는 여전히 webpack을 사용하고 있으니까요. 커스텀 할 일이 종종 발생하거든요.

webpack, babel 도 각각 6~7 번씩은 정독하고, 연습했던거 같아요.

참 하나만 배워서 끝까지 쓴다는건 없는거 같긴합니다.

개발 생태계는 항상 앞전의 해결책을 기반으로 더 나은 해결책을 만들어내고, 어떨 때는 아얘 다른 접근방식으로 문제를 해결해 새로운 영역을 받아들어야 하기도 하지요.

vite 공식문서는 너~~무나 잘정리되어있으니, 한번 보시는 걸 추천드리고, 저는 그중에서 핵심 + 개인적 견해 + 이해를 돕기위한 첨언 으로 글을 작성해 보았습니다.

'FE > vite' 카테고리의 다른 글

vite 환경변수 (0)	2023.01.13
vite 빌드하기 (0)	2023.01.09
vite 가 CSS, Static Assets, JSON, Dynamic Imports를 처리하는 방법 (0)	2023.01.09
vite의 module 처리와 typescript 설정 살펴보기 (0)	2023.01.09
Vite로 개발환경 만들기 (0)	2023.01.08

Dev 콩 블로그

[vite] 프론트엔드 개발자를 위한 Vite 101

🧑‍🏭️ Vite 는 Esbuild + Rollup 으로 만들어진 차세대 프론트엔드 개발 도구입니다.

🏭 최종 빌드에는 Rollup 을 사용하는 이유

✍️ Vite 가 지원하는 기능

node_modules 지원

Hot Module Replacement

Typescript

⚠️ typescript 컴파일 옵션 주의사항

⌨️ Client Types

💡 JSX 지원

💡 CSS

PostCSS 기본 지원

CSS Modules

CSS 전처리기 지원

페이지에 CSS 주입 비활성화

💡 Static assets

💡 JSON

💡 동적 import

💡 Web Workers

🛠️ 빌드 최적화

css code splitting

비동기 import 최적화

💡 캐싱

💡 최종 빌드

빌드 커스터마이징

💡 라이브러리 모드

💡 Env

🔌 플러그인

플러그인 순서

Rollup 플러그인 호환

마무리

'FE > vite' 카테고리의 다른 글

티스토리툴바

[vite] 프론트엔드 개발자를 위한 Vite 101

🧑‍🏭️ Vite 는 Esbuild + Rollup 으로 만들어진 차세대 프론트엔드 개발 도구입니다.

🏭 최종 빌드에는 Rollup 을 사용하는 이유

✍️ Vite 가 지원하는 기능

node_modules 지원

Hot Module Replacement

Typescript

⚠️ typescript 컴파일 옵션 주의사항

⌨️ Client Types

💡 JSX 지원

💡 CSS

PostCSS 기본 지원

CSS Modules

CSS 전처리기 지원

페이지에 CSS 주입 비활성화

💡 Static assets

💡 JSON

💡 동적 import

💡 Web Workers

🛠️ 빌드 최적화

css code splitting

비동기 import 최적화

💡 캐싱

💡 최종 빌드

빌드 커스터마이징

💡 라이브러리 모드

💡 Env

🔌 플러그인

플러그인 순서

Rollup 플러그인 호환

마무리

'FE > vite' 카테고리의 다른 글

관련글

티스토리툴바