feat: webpack build, buld-dev 속도 개선 (#1002)

* chore: 센트리 비활성화

* chore:  ts-loader가 타입 검사를 중복으로 수행하지 않도록 함

* chore: 사용되지 않는 코드 주석처리

* chore: emotion을 위해 jsx pragma를 쓰지 않아도 되도록 쑤정

* chore: dev 환경에선 불필요한 터서 최적화 제거

* chore: deprecated된 [has]를 [contenthash]로 변경

* chore: prod 환경에 터서 최적화 장착

* chore: 원본 코드 없이 라인 트래킹만 가능한 소스맵으로 변경

* chore: prod환경에서는 파일시스템 캐싱 사용

* chore: 린트를 위해 devdep 업데이트

* chore: 불필요한 공백 제거

* chore: line 커멘드에 --fix 옵션 추가

* chore: node_modules와 webpack cache를 워크플로우에 추가

* fix: hotfix 시에는 타입 체크 필요하므로 prod build에 타입 검사 추가

* fix: 현재 위치에서 요청하지 않도록 publicPath 작성

* fix: 노드 모듈스 캐싱을 뒤쪽에 해서 의미가 없던걸 앞으로 땡김

* chore: CI 과정에도 노드모듈스와 웹팩 캐시

* chore: prod, dev에서 중복으로 사용되는 플러그인을 common에 추가

* chore: import 수정

Author: pakxe

.github/workflows/frontend-dev-deploy.yml

@@ -26,6 +26,24 @@ jobs:
         with:
           node-version: "20.15.1"
 
+      # 노드모듈스 캐싱
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      # 웹팩 캐싱(패키지락과 프로드웹팩컨픽이 바뀌지 않으면 캐시 사용)
+      - name: Cache Webpack
+        uses: actions/cache@v4
+        with:
+          path: node_modules/.cache
+          key: ${{ runner.os }}-webpack-${{ hashFiles('package-lock.json', 'webpack.prod.mjs') }}
+          restore-keys: |
+            ${{ runner.os }}-webpack-
+              
       # 3. 의존성 설치
       - name: Install Dependencies
         run: npm install

.github/workflows/frontend-prod-deploy.yml

@@ -26,6 +26,28 @@ jobs:
         with:
           node-version: "20.15.1"
 
+      # 노드모듈스 캐싱
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      # 웹팩 캐싱(패키지락과 프로드웹팩컨픽이 바뀌지 않으면 캐시 사용)
+      - name: Cache Webpack
+        uses: actions/cache@v4
+        with:
+          path: node_modules/.cache
+          key: ${{ runner.os }}-webpack-${{ hashFiles('package-lock.json', 'webpack.prod.mjs') }}
+          restore-keys: |
+            ${{ runner.os }}-webpack-
+            
+      # 5. Prod 환경으로 빌드
+      - name: Build for Prod environment
+        run: npm run build
+
       # 3. 의존성 설치
       - name: Install Dependencies
         run: npm install
@@ -40,10 +62,6 @@ jobs:
           echo "KAKAO_REDIRECT_URI=${{ secrets.KAKAO_REDIRECT_URI }}" >> .env.prod
           echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> .env.prod
 
-      # 5. Prod 환경으로 빌드
-      - name: Build for Prod environment
-        run: npm run build
-
       # 6. AWS 인증 설정
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v3