← Back to React Course | Chapter 14: Performance & Production Deployment | Lesson 8 of 13

Production Build बनाना

एक production build बनाना अपने finished dish को ले जाने के लिए पैक करने जैसा है — messy kitchen prep trim करते हुए और सिर्फ polished, ready-to-eat version भेजते हुए।

In this page:

  1. Development Mode Production-Ready क्यों नहीं है
  2. Build Process Actually क्या करता है
  3. Production Build को Locally Preview करना

Development Mode Production-Ready क्यों नहीं है

Development server (npm run dev) runtime speed से ज़्यादा fast rebuilds और helpful warnings/error messages को prioritize करता है, जो चाहिए वास्तविक users को उससे इसे noticeably slower और larger बनाते हुए।

एक production build इस dev-only overhead को strip करता है और minification जैसे real optimizations apply करता है।

Note:
  • Development mode आपकी coding के दौरान iteration speed के लिए optimized है
  • Production mode आपके USERS के experience के लिए optimized है।
Warning: Raw development server को real users तक deploy करने का मतलब है slower load times और exposed, unminified source code, साथ में unnecessarily run होने वाले dev-only warnings।

उदाहरण: Dev Server vs. Production Build Output

bash 
$ npm run dev
  VITE v5.0.0  ready in 320 ms
  ➜  Local:   http://localhost:5173/
# unminified, includes dev warnings, rebuilds instantly on save

$ npm run build
vite v5.0.0 building for production...
✓ 34 modules transformed.
dist/assets/index-4f3a2b1c.js   142.31 kB │ gzip: 45.62 kB
# minified, dev warnings stripped, optimized for users

⚠️ Run this in your own terminal or Node.js environment.

Build Process Actually क्या करता है

Build command run करना आपके सारे JavaScript/CSS को optimized files में bundle करता है, इन्हें minify करता है (whitespace हटाते और variable names shorten करते हुए), और अक्सर faster initial loading के लिए code को छोटे chunks में split करता है — सब मिलकर एक static output folder (dist या build) produce करते हुए serving के लिए ready।

Note: एक build से output folder सिर्फ static files (HTML/CSS/JS) है — यह कहीं भी host हो सकता है जो static files serve करे, एक plain React SPA के लिए कोई special server logic नहीं चाहिए।
Warning: Build output folder को version control में commit करना usually unnecessary है और confusing merge conflicts cause कर सकता है — ज़्यादातर projects इसे .gitignore करते हैं और हर deployment के लिए fresh rebuild करते हैं।

उदाहरण: Running the Build Command

bash 
$ npm run build
vite v5.0.0 building for production...
✓ 34 modules transformed.
dist/index.html                   0.46 kB
dist/assets/index-4f3a2b1c.js   142.31 kB │ gzip: 45.62 kB
dist/assets/index-9c8d7e6f.css    3.21 kB │ gzip:  1.10 kB

$ ls dist
assets  index.html

⚠️ Run this in your own terminal or Node.js environment.

Production Build को Locally Preview करना

Deploy करने से पहले, actually production build को locally run करना और click through करना important है, क्योंकि कुछ bugs सिर्फ optimized/minified version में दिखते हैं, more forgiving development server में नहीं।

Vite का 'vite preview' command exactly इसी purpose के लिए locally built output serve करता है।

Note: Deploy करने से पहले हमेशा production build का at least एक quick smoke test करें, खासकर significant changes के बाद।
Warning: इस step को skip करना और सीधे 'यह dev mode में काम किया' से deploy करना production-only bugs (जैसे environment variable misconfigurations) को real users तक पहुंचने दे सकता है।

उदाहरण: Previewing the Build Locally

bash 
$ npm run build
✓ built in 1.2s

$ npm run preview
  ➜  Local:   http://localhost:4173/

⚠️ Run this in your own terminal or Node.js environment.

Related Topics

Vite से App बनाना · Create React App से App बनाना · React को PWA के रूप में बनाना · React में Environment Variables

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. Development server (npm run dev) deploy करना एक real production build के बजाय — dev servers slower हैं और real users के लिए नहीं बने।
  2. Deploy करने से पहले actual production build locally test न करना, build-specific bugs miss करते हुए जो dev mode में नहीं दिखते।
  3. यह भूल जाना कि environment-specific configuration (जैसे API URLs) को production build के लिए correctly set होना चाहिए, development defaults के रूप में नहीं छोड़ा जाना चाहिए।
चैप्टर सारांश
  • एक production build real users के लिए आपके app का code compile, minify, और optimize करता है, development server के विपरीत।
  • 'npm run build' (Vite/Create React App convention) optimized files का एक static folder generate करता है deploy करने के लिए ready।
  • Deploy करने से पहले हमेशा actual production build locally test करें (जैसे 'vite preview' के through)।
  • Production builds development-only warnings strip करते हैं और optimizations enable करते हैं जो apps को meaningfully faster बनाते हैं।
ब्राउज़र सपोर्ट

Build-tool feature — आपके app को already जो चाहिए उससे parे कोई specific React version requirement नहीं।

🔒

Chapter Quiz — Complete all 13 topics to unlock

0/13 topics done

Complete these topics first:

← Previous Lesson React as a PWA Next Lesson → Environment Variables in React

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.