Vite 또는 Webpack? 왜 모두?

Dec 20 2022

소개 React와 Webpack을 사용하는 복잡한 웹 애플리케이션에서 작업하는 경우 버그와 속도 저하 때문에 Webpack을 완전히 버리는 것에 대해 한 번 이상 생각했을 것입니다. 이 튜토리얼은 이 문제를 해결하는 가장 쉬운 방법을 설명합니다.

소개

React와 Webpack을 사용하는 복잡한 웹 애플리케이션에서 작업하는 경우 버그와 속도 저하 때문에 Webpack을 완전히 버리는 것에 대해 한 번 이상 생각했을 것입니다. 이 튜토리얼은 이 문제를 해결하는 가장 쉬운 방법을 설명합니다.

Webpack의 문제점은 무엇입니까?

웹팩이 느립니다!

개발팀에서 보고한 몇 가지 문제는 다음과 같습니다.

Slow Dev 서버 시작 시간, 약 1:30분(지속적으로 증가).
느린 HMR 새로 고침 시간, 약 5-10초(때때로 멈추기도 함).
일반적인 개발 경험은 짜증나고 생산적이지 않습니다.

짧은 연구를 통해 훨씬 더 나은 대안이 있으며 가장 인기 있는 대안은 Vite( vitejs.dev ) 임을 알 수 있습니다.

Vite는 환상적인 도구입니다. Webpack이 가지고 있는 문제는 전혀 없지만 기존의 프로덕션 커스터마이징과 잘 작동하지 않을 수 있다는 개발팀의 두려움 때문에 Webpack을 완전히 대체하기는 어렵습니다.

그래서 이 문제에 대한 제 해결책은 Vite를 Webpack을 완전히 대체하는 대신 대안으로 추가하여 Webpack과 함께 작동하는 것이었습니다.

내가 만난 문제와 해결책

Vite를 기존 프로젝트에 통합하는 방법에 대한 좋은 자습서를 찾지 못했기 때문에 운 좋게도 모든 문제에 대한 좋은 해결책을 찾기 위해 엄청난 시간을 투자했기 때문에 그럴 필요가 없습니다.

해야 할 첫 번째 단계는 vite 및 @vitejs/plugin-react 패키지를 기존 프로젝트에 추가하고 vite.config.js(프로젝트의 루트에)를 생성하는 것입니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  type: "module",
  plugins: [],
  optimizeDeps: {
    include: ["react"],
  },
  build: {
    commonjsOptions: {
      include: [/node_modules/],
    },
  },
});

그 주된 이유는 다음과 같습니다.

Vite가 기존 환경 변수와 함께 작동하지 못했습니다.
Vite는 새 버전이 없는 일부 이전 npm 패키지를 처리하지 못했습니다.
Vite는 "require"를 사용하여 가져오기를 처리하지 못했습니다.
Webpack 구성에는 가져오기 "별칭"에 대한 사용자 지정 정의가 있으므로 Vite는 이를 처리하는 방법을 알지 못했습니다.
Webpack 구성은 사용자 지정 프록시 설정을 정의했습니다.

우리 웹 애플리케이션은 CRA(Create React App) 방식으로 env 변수를 사용했습니다.

예시:process.env.REACT_APP_VARIABLE_NAME

그러나 Vite는 env 변수를 처리하는 다른 방법을 정의합니다.

이와 같이:import.meta.env.VARIABLE_NAME

그래서 저는 Vite에게 env 변수를 다르게 정의하도록 지시하는 방법을 찾고 있었습니다. vite-plugin-environment 를 정확하게 수행하는 좋은 플러그인을 찾았습니다.

이 플러그인을 구성 파일에 추가하면 이 문제를 해결할 수 있습니다.

plugins: [
    ...
    EnvironmentPlugin("all"),
]

이것은 Vite의 가장 큰 문제 중 하나입니다. 그는 유지 관리되지 않은 오래된 패키지를 처리하지 못합니다. 우리는 앱에 몇 가지가 있었고 그것들을 교체하는 것은 옵션이 아니었습니다.

따라서 해결책은 빌드 중에 패키지의 내용을 다른 내용으로 바꾸는 것입니다.

이를 위해 패키지 이름을 지정하고 다른 콘텐츠로 조롱할 수 있는 플러그인 vite-plugin-resolve 를 사용했습니다. 제 경우에는 수정해야 할 패키지가 대부분의 UI 흐름에서 사용되지 않았기 때문에 그냥 빈 콘텐츠로 교체했습니다.

예를 들어 우리는 이라는 react-codemirror2구성 요소를 내보내는 이라는 이름의 패키지를 사용했습니다 UnControlled. 방금 콘텐츠를 빈 개체로 교체했으며 이렇게 하면 이 패키지의 문제가 해결됩니다.

plugins: [
    ...
    resolve({ "react-codemirror2": `
        const UnControlled = {};
        export {
          UnControlled,
        }`
    }
]

또한 이 경우 해결책은 문제를 해결할 플러그인 vite-plugin-require 를 사용하는 것입니다.

팁: 가져오기를 사용하는 구성 요소의 자세한 이름을 제공하는 것이 좋습니다 require.

예: CostViewerDialog.tsx파일만 처리하도록 플러그인을 구성합니다.

plugins: [
    ...
    vitePluginRequire({fileRegex: /(CostViewerDialog.tsx)$/}),
]

Vite는 가져오기 별칭을 기본적으로 지원합니다.

예: 경로의 별칭을 다음과 ./src/Components같이 정의하려면Components

resolve: {
    alias: {     
        Components: path.resolve(__dirname, "./src/Components"),
    }, 
},

Vite는 프록시 설정 정의를 기본적으로 지원합니다.

예: 모든 로컬 서버 호출을 포트로 리디렉션8090

server: {
  port: 3000,
  proxy: {
    "^/api/v1/.*": "http://localhost:8090",
  },
},

디버깅을 허용하려면 다음 설정을 vite.config.js파일 에 추가하십시오.

esbuild: {
  sourcemap: true,
},

결과

결과는 놀라웠습니다!

요약

Vite로 이동하는 것은 어렵지만 잠재적 이점은 상당합니다. Vite를 추가한 지 몇 달 후 개발팀은 생산성이 크게 향상되어 더 나은 제품을 더 빨리 만들 수 있다고 보고했습니다. 전환을 원하지만 어디서부터 시작해야 할지 모르겠다면 제가 도와드리겠습니다. 저에게 연락하시면 절차를 안내하여 원활한 전환을 보장해 드리겠습니다.