[느린게 싫다면-01]CRA가 느리고 답답하면 Vite 를 써보세요! + path alias

vite 이 cra 보다 빠른건 당연하다.

그 이유는 vite에 번들은 Esbuild 으로 개발되있기에 속도가 빠를 수 밖에 없다.

STEP-1 : Project Init

hello-vite 로 프로젝트를 만듭니다.

npm init vite@latest hello-vite --template react-ts

결과

npx: 6개의 패키지를 2.587초만에 설치했습니다.

Scaffolding project in /Users/kimdonghyun/Workspace/Private/2_Study/hello-vite...

Done. Now run:

  cd hello-vite
  npm install
  npm run dev

hello-vite 폴더로 이동

cd hello-vite

 

 

STEP-2 : module Install / 서버 실행

yarn install

yarn dev

 

실행 성공!

 

STEP-3 : Typescript Path Alias 설정

잘 동작되지만, import 지옥을 싫어하는 사람 입장으로 필수적인 옵션이 있다 바로 path alias 설정이다.

 

 

baseUrl, paths 추가

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  },
  "include": ["./src"]
}

vite.config.ts 수정

수정 전에 @types/node 를 설치해서 fs, path 등을 사용할 수 있게한다.

yarn add -D @types/node

vite.config.ts 수정

import react from "@vitejs/plugin-react";
import fs from "fs";
import path from "path";
import { Alias, defineConfig } from "vite";

interface TSConfig {
  compilerOptions: {
    baseUrl?: string;
    paths?: {
      [key: string]: string[];
    };
  };
}

const tsConfig = JSON.parse(
  fs.readFileSync(path.resolve(__dirname, "./tsconfig.json"), "utf-8")
) as TSConfig;

const tsConfigAlias = (typeScriptConfig: TSConfig): Alias[] => {
  const aliasMap: Alias[] = [];
  for (let key in typeScriptConfig.compilerOptions.paths) {
    if (/\/\*$/.test(key)) {
      const keyWithoutStar = key.replace(/\/\*$/, "");
      const targetDir = typeScriptConfig.compilerOptions.paths[key][0].replace(
        /\/\*$/,
        ""
      );
      aliasMap.push({
        find: keyWithoutStar,
        replacement: path.join(__dirname, "/", targetDir),
      });
    } else {
      aliasMap.push({
        find: key,
        replacement: path.join(
          __dirname,
          "/",
          typeScriptConfig.compilerOptions.paths[key][0]
        ),
      });
    }
  }
  return aliasMap;
};

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: tsConfigAlias(tsConfig),
  },
});

서버 다시 실행하면 완료!

yarn dev

 

 

 

테스트하기

 mkdir -p src/Components src/Common

src/Components/index.tsx 생성

touch src/Components/index.tsx 

// src/Components/index.tsx 
import React from "react";

export interface TestCompProps {
  count: number;
}

export const TestComp: React.FC<TestCompProps> = ({ count }) => {
  return <h1>{count}</h1>;
};

src/Common/index.tsx 생성

touch src/Common/index.ts

// touch src/Common/index.ts
export const increment = (value: number): number => {
  return value + 1;
};

src/App.tsx 수정

import { useState } from "react";
import { TestComp } from "~/Components";
import { increment } from "~/Common";

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(increment(count));
  };

  return (
    <div className="App">
      <TestComp count={count} />
      <button onClick={handleClick}>increment</button>
    </div>
  );
}

export default App;

 

잘 동작된다 ㅎㅎ

 

github link : https://github.com/shingidad/hello-vite-react