16. Vite i bundling

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),  // import '@/components/Button' zamiast '../../components/Button'
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',  // Proxy API podczas dewelopmentu
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,  // Source maps dla debugowania
  },
});

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

// Leniwe ładowanie stron — każda strona to osobny chunk
const HomePage = lazy(() => import('./pages/Home'));
const ProductsPage = lazy(() => import('./pages/Products'));
const CartPage = lazy(() => import('./pages/Cart'));

function App() {
  return (
    <Suspense fallback={<div>Ładowanie...</div>}>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/products" element={<ProductsPage />} />
        <Route path="/cart" element={<CartPage />} />
</Routes>
    </Suspense>
  );
  // Vite automatycznie dzieli kod na chunki: home.js, products.js, cart.js
  // Przeglądarka ładuje tylko potrzebny chunk!
}