Bundler (feat.vite)

번들러

개발자가 직접 처리해줘야할 일들을 대신 처리해주는 것 (transfiler)

 

https://www.youtube.com/watch?v=UdTD_NAWxyE 

 

yarn create vite

vite 로 만들어준 프로젝트에 yarn build 로 빌드해주면 나오는 dist 폴더를 확인해준다.

 

assets 폴더에 존재하는 파일은 vite로 생성해준 프로젝트를 압축시킨 내용이므로 얼핏 보기에 알아보기 힘들다.

이러한 파일을 vite.config.js 파일의 build 안에 minify을 false로 설정하면 그나마 보기 좋게 바뀌는데

export default defineConfig({
  plugins: [react()],
  esbuild: {
    jsxInject: `import React from 'react'`,
  },
  build: {
    minify: false,
  },
});

해당 build의 minify 는 대부분의 번들러에 존재하는 기능이다.

 

위의 파일이 아래처럼 변경됨

프로젝트의 모든 파일의 내용이 담겨있으므로 매우 복잡하고 길다.

 

App.jsx 파일 확인하기