📦 chore: 라이브러리 별 코드 스플리팅 및 Sentry 트리 셰이킹 적용

src/components/ErrorBoundary/fallback/RootApiFallback.tsx

@@ -1,7 +1,11 @@
 import { type FallbackProps } from 'react-error-boundary';
 import { useEffect } from 'react';
 import { isAxiosError } from 'axios';
-import * as Sentry from '@sentry/react';
+import {
+  getCurrentScope as SentryGetCurrentScope,
+  setContext as SentrySetContext,
+  captureException as SentryCaptureException,
+} from '@sentry/react';
 import ERROR_RESPONSES from '@/constants/errorMessages';
 import ErrorImage from '@/assets/images/error.svg';
 import Button from '../../Button';
@@ -20,7 +24,7 @@ const RootApiFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
       return;
     }
 
-    const scope = Sentry.getCurrentScope();
+    const scope = SentryGetCurrentScope();
     scope.setTag('type', 'api');
 
     scope.setContext('API Request Detail', {
@@ -31,12 +35,12 @@ const RootApiFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
       headers: error.config?.headers,
     });
 
-    Sentry.setContext('API Response Detail', {
+    SentrySetContext('API Response Detail', {
       status: error.response?.status,
       data: error.response?.data,
     });
 
-    Sentry.captureException(error);
+    SentryCaptureException(error);
   }, []);
 
   if (shouldSkip) {

src/components/ErrorBoundary/fallback/RootUnknownFallback.tsx

@@ -2,7 +2,10 @@ import { type FallbackProps } from 'react-error-boundary';
 import { useEffect } from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 import { isAxiosError } from 'axios';
-import * as Sentry from '@sentry/react';
+import {
+  getCurrentScope as SentryGetCurrentScope,
+  captureException as SentryCaptureException,
+} from '@sentry/react';
 import ERROR_RESPONSES from '@/constants/errorMessages';
 import ErrorImage from '@/assets/images/error.svg';
 import { ROUTER_PATHS } from '@/constants/routerPaths';
@@ -23,10 +26,10 @@ const RootUnknownFallback = ({ error }: FallbackProps) => {
       return;
     }
 
-    const scope = Sentry.getCurrentScope();
+    const scope = SentryGetCurrentScope();
     scope.setTag('type', 'unknown');
 
-    Sentry.captureException(error);
+    SentryCaptureException(error);
   }, []);
 
   if (shouldSkip) {

src/main.tsx

@@ -4,19 +4,23 @@ import { HelmetProvider } from 'react-helmet-async';
 import ReactDOM from 'react-dom/client';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { QueryClientProvider } from '@tanstack/react-query';
-import * as Sentry from '@sentry/react';
+import {
+  init as SentryInit,
+  browserTracingIntegration as SentryBrowserTracingIntegration,
+  replayIntegration as SentryReplayIntegration,
+} from '@sentry/react';
 import queryClient from '@/api/queryClient';
 import { router } from '@/router';
 import { SKIP_MSW_WARNING_URL } from './constants/msw';
 import STORAGE_KEYS from './constants/storageKeys';
 import 'reset-css';
 import './main.css';
 
-Sentry.init({
+SentryInit({
   dsn: import.meta.env.VITE_SENTRY_DSN,
   integrations: [
-    Sentry.browserTracingIntegration(),
-    Sentry.replayIntegration({
+    SentryBrowserTracingIntegration(),
+    SentryReplayIntegration({
       maskAllText: false,
       blockAllMedia: false,
       networkDetailAllowUrls: [import.meta.env.VITE_BACKEND_ENDPOINT],

vite.config.ts

@@ -23,6 +23,18 @@ export default defineConfig(({ mode }) => {
 
     build: {
       sourcemap: true,
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            react: ['react', 'react-dom'],
+            emotion: ['@emotion/react'],
+            state: ['@tanstack/react-query', 'zustand'],
+            form: ['react-hook-form'],
+            mui: ['@mui/material'],
+            sentry: ['@sentry/react'],
+          },
+        },
+      },
     },
 
     plugins: [
@@ -36,6 +48,13 @@ export default defineConfig(({ mode }) => {
         sourcemaps: {
           filesToDeleteAfterUpload: ['**/*.js.map'],
         },
+        bundleSizeOptimizations: {
+          excludePerformanceMonitoring: true,
+          excludeDebugStatements: true,
+          excludeReplayIframe: true,
+          excludeReplayShadowDom: true,
+          excludeReplayWorker: true,
+        },
       }),
     ],
   };