البناء والتجميع بـ Vite

١من كود التطوير إلى ملفات الإنتاج

أثناء التطوير يقدّم Vite ملفاتك كما هي تقريبًا: كل ملف JSX يُحوَّل لحظة طلبه، وأي حفظ يظهر فورًا في المتصفح (HMR). هذا مريح لكنه غير مناسب للمستخدمين: مئات الملفات الصغيرة، وكود غير مصغّر، ورسائل تطوير.

البناء Build يحوّل المشروع إلى ملفات قليلة جاهزة للنشر في مجلد dist:

٢مشروع Vite: الأوامر الثلاثة

$ npm create vite@latest shop -- --template react$ cd shop && npm install$ npm run dev   VITE v8.3.4  ready in 233 ms   ➜  Local:   http://localhost:5173/  ➜  Network: use --host to expose

وهذا ناتج npm run build حقيقيًّا لمشروع صغير فيه مكوّن يُحمَّل عند الطلب:

$ npm run build vite v8.3.4 building client environment for production...transforming...✓ 18 modules transformed.rendering chunks...computing gzip size...dist/index.html                    0.45 kB │ gzip:  0.29 kBdist/assets/index-nqMpL4T3.css     1.78 kB │ gzip:  0.81 kBdist/assets/Reports-hyDh2IOE.js    0.13 kB │ gzip:  0.15 kBdist/assets/index-DffAr-dX.js    221.37 kB │ gzip: 69.37 kB ✓ built in 186ms

لاحظ أن ملف التطبيق 221 كيلوبايت (معظمه React نفسها)، لكنه يصل للمستخدم مضغوطًا بـ gzip في 69 كيلوبايت. والمكوّن Reports صار ملفًّا مستقلًّا لا يُحمَّل إلا حين يُعرض، لأننا استوردناه بـ lazy:

import { useState, lazy, Suspense } from 'react';const Reports = lazy(() => import('./Reports.jsx'));   // ملف مستقل في البناء export default function App() {  const [show, setShow] = useState(false);  return (    <main>      <h1>{import.meta.env.VITE_SHOP_NAME}</h1>      <button onClick={() => setShow(true)}>التقارير</button>      {show && <Suspense fallback={<p>…</p>}><Reports /></Suspense>}    </main>  );}

٣متغيرات البيئة في الواجهة

عنوان الخادم يختلف بين جهازك (http://localhost:3000) والإنتاج. Vite يقرأ ملفات .env ويعطيك المتغيرات التي تبدأ بـ VITE_ فقط عبر import.meta.env، ويستبدلها بقيمتها نصًّا داخل الملف المبني:

# .env.productionVITE_API_URL=https://api.myshop.saVITE_SHOP_NAME=متجر الكلية

// api.jsconst BASE = import.meta.env.VITE_API_URL;   // يُستبدل وقت البناءfetch(`${BASE}/api/products`);

٤Express يقدّم الواجهة المبنية

في الإنتاج يكفي غالبًا خادم واحد: Express يقدّم ملفات dist، ويخدم /api. فلا حاجة لـ CORS (الأصل نفسه). وثلاث تفاصيل مهمة:

• الملفات المجزّأة assets/* لا يتغير محتواها أبدًا (أي تعديل يغيّر اسمها)، فنسمح للمتصفح بتخزينها سنة كاملة.
• أما index.html فلا يُخزَّن، حتى يجد المستخدم أسماء الملفات الجديدة بعد كل نشر.
• تطبيق الصفحة الواحدة SPA فيه مسارات مثل /products/7 تعالجها React Router في المتصفح؛ فإن فتحها المستخدم مباشرة يجب أن يعيد الخادم index.html لا 404.

const express = require('express');const path = require('path');const app = express();const DIST = path.join(__dirname, 'dist'); // 1) الواجهة البرمجية أولًاapp.get('/api/health', (req, res) => res.json({ ok: true }));app.use('/api', (req, res) => res.status(404).json({ error: 'مسار API غير موجود' })); // 2) الملفات المبنية: الأصول المجزّأة تُخزَّن سنةapp.use('/assets', express.static(path.join(DIST, 'assets'), { maxAge: '1y', immutable: true }));app.use(express.static(DIST, { index: false })); // 3) أي مسار آخر = صفحة من صفحات React ← index.html بلا تخزينapp.get('/{*splat}', (req, res) => {  res.set('Cache-Control', 'no-cache');  res.sendFile(path.join(DIST, 'index.html'));}); app.listen(process.env.PORT || 3000);

<!doctype html><html lang="ar" dir="rtl">  <head>    <meta charset="UTF-8" />    <title>متجر الكلية</title>    <script type="module" crossorigin src="/assets/index-DffAr-dX.js"></script>    <link rel="stylesheet" crossorigin href="/assets/index-nqMpL4T3.css">  </head>  <body>    <div id="root"></div>  </body></html>

import{t as e}from"./vendor.js";/* … كود التطبيق بعد التصغير … */

main{max-width:40rem;margin:auto}h1{color:#149eca}