import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; // https://vite.dev/config/ export default defineConfig({ plugins: [react()], build: { // Enable minification for production builds (Req 13.9) // Vite 8+ uses oxc by default; 'esbuild' requires a separate install. // Leaving minify at its default ('oxc' in Vite 8) gives fast, aggressive // minification out of the box. // minify: 'esbuild', // uncomment if esbuild is installed separately // Raise the warning threshold slightly – Ant Design + Slate are large // but are split into their own vendor chunk below. chunkSizeWarningLimit: 600, rollupOptions: { output: { /** * Manual chunk splitting (Req 13.8) * * Splitting large vendor libraries into dedicated chunks means the * browser can cache them independently of app code. Tree-shaking * (built into Rollup by default) removes unused exports within each * chunk automatically (Req 13.9). * * Chunk strategy: * - react-vendor : React + React-DOM (stable, rarely changes) * - antd-vendor : Ant Design (large UI library, rarely changes) * - slate-vendor : Slate.js + slate-react + slate-history * - utils-vendor : Axios, Zustand, uuid (small but third-party) * - app code : everything under src/ (split by React.lazy) */ manualChunks(id: string) { if (id.includes('node_modules/react') || id.includes('node_modules/react-dom')) { return 'react-vendor'; } if (id.includes('node_modules/antd') || id.includes('node_modules/@ant-design')) { return 'antd-vendor'; } if ( id.includes('node_modules/slate') || id.includes('node_modules/slate-react') || id.includes('node_modules/slate-history') ) { return 'slate-vendor'; } if ( id.includes('node_modules/axios') || id.includes('node_modules/zustand') || id.includes('node_modules/uuid') ) { return 'utils-vendor'; } // All other node_modules go into a generic vendor chunk if (id.includes('node_modules')) { return 'vendor'; } }, }, // Rollup performs tree-shaking by default when building ES modules. // These options reinforce that unused exports are dropped (Req 13.9). treeshake: { moduleSideEffects: false, propertyReadSideEffects: false, }, }, }, });