Kod Bölme — Giriş Ekranı Neden Grafik Kütüphanesini İndiriyor?

1
import { lazy, Suspense } from 'react';
2
import { createBrowserRouter } from 'react-router';
3

4
// Each page becomes its own chunk, downloaded the first time it is opened.
5
const Accounts = lazy(() => import('./pages/Accounts'));
6
const Transfer = lazy(() => import('./pages/Transfer'));
7
const Reports = lazy(() => import('./pages/Reports'));
8

9
const page = (Component: React.ComponentType) => (
10
  <Suspense fallback={<p role="status">Yükleniyor…</p>}>
11
    <Component />
12
  </Suspense>
13
);
14

15
export const router = createBrowserRouter([
16
  { path: '/hesaplar', element: page(Accounts) },
17
  { path: '/havale', element: page(Transfer) },
18
  { path: '/raporlar', element: page(Reports) },
19
]);

1
import { useState } from 'react';
2
import { SpendingChart } from '../charts/SpendingChart';
3

4
export default function Reports() {
5
  const [exporting, setExporting] = useState(false);
6

7
  async function exportPdf() {
8
    setExporting(true);
9
    // The PDF library is heavy and rarely used: fetch it only now.
10
    const { buildStatementPdf } = await import('../pdf/statement');
11
    await buildStatementPdf();
12
    setExporting(false);
13
  }
14

15
  return (
16
    <>
17
      <SpendingChart />
18
      <button type="button" onClick={exportPdf} disabled={exporting}>
19
        {exporting ? 'Hazırlanıyor…' : 'PDF olarak indir'}
20
      </button>
21
    </>
22
  );
23
}

1
// The browser already knows how to format Turkish dates; no date library needed.
2
const turkishDate = new Intl.DateTimeFormat('tr-TR', { day: 'numeric', month: 'long', year: 'numeric' });
3
const turkishMoney = new Intl.NumberFormat('tr-TR', { style: 'currency', currency: 'TRY' });
4

5
export const formatDate = (date: Date): string => turkishDate.format(date);
6
export const formatMoney = (amount: number): string => turkishMoney.format(amount);

1
import { defineConfig } from 'vite';
2
import react from '@vitejs/plugin-react';
3
import { visualizer } from 'rollup-plugin-visualizer';
4

5
export default defineConfig({
6
  plugins: [
7
    react(),
8
    // Writes stats.html after each build: which chunk holds what, and how big it is.
9
    visualizer({ filename: 'stats.html', gzipSize: true }),
10
  ],
11
});