Web/vite.config.ts at develop · TTORANG/Web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import type { Connect } from 'vite';
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';

// .mp4 파일 요청에 Accept-Ranges 헤더를 추가하는 미들웨어
// Chrome에서 비디오 탐색(seeking)이 가능하도록 함
const addAcceptRangesMiddleware: Connect.NextHandleFunction = (req, res, next) => {
  if (req.url?.endsWith('.webm')) {
    res.setHeader('Accept-Ranges', 'bytes');
  }
  next();
};

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    svgr(),
    // TODO: Vite에서 mp4 파일에 대해 Accept-Ranges 헤더를 추가하는 임시 플러그인
    {
      name: 'add-accept-ranges',
      configureServer(server) {
        server.middlewares.use(addAcceptRangesMiddleware);
      },
      configurePreviewServer(server) {
        server.middlewares.use(addAcceptRangesMiddleware);
      },
    },
  ],
  // CDN CORS 우회를 위한 proxy 설정 (개발 환경)
  server: {
    proxy: {
      '/cdn-proxy': {
        target: 'https://cdn.ttorang.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/cdn-proxy/, ''),
        secure: true,
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  build: {
    sourcemap: true,
    chunkSizeWarningLimit: 800,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (
              id.includes('react') ||
              id.includes('react-dom') ||
              id.includes('react-router-dom') ||
              id.includes('sonner') ||
              id.includes('zustand')
            ) {
              return 'react-vendor';
            }
            if (id.includes('@tanstack/react-query')) {
              return 'tanstack-vendor';
            }
            if (id.includes('recharts')) {
              return 'chart-vendor';
            }
            if (id.includes('hls.js')) {
              return 'video-vendor';
            }
            if (id.includes('dayjs') || id.includes('clsx') || id.includes('axios')) {
              return 'app-vendor';
            }
          }
          return undefined;
        },
      },
    },
  },
});