Production Build Explained - Dev vs Prod Build, HTTP Server

1. Build means compiling code to make it ready to run
2. Angular has two types of builds
3. Development build
4. Production build

Development Build

1. Used while working on the project
2. Runs using ng serve
3. Code changes reflect instantly in the browser
4. Easy debugging
5. Source code is visible in browser DevTools
6. Slower performance compared to production

Production Build

1. Code is compiled and optimized
2. Code is minified and compressed
3. File size becomes smaller
4. Application runs faster
5. Source code is not visible in browser
6. Used for deployment

Create Production Build

Command:

1. After running this command, a dist folder is created
2. Build time depends on project size

Dist Folder Structure

1. Go to dist → project-name → browser
2. index.html is the main file
3. One minified JavaScript file
4. One minified CSS file
5. Original src code is merged and compressed

Why Production Build is Faster?

1. JavaScript code is minified
2. CSS file size is reduced
3. Fewer files are loaded
4. Better browser performance

Run Production Build Locally

Production build needs a server.

Install HTTP Server

Command:

1. Installed globally
2. On Mac, sudo may be required
3. On Windows, usually no sudo needed

Run Production Build Using HTTP Server

Steps:

1. Go inside dist → project-name → browser
2. Run command:

1. If port is busy, use another port
2. Server starts successfully
3. Open given URL in browser

Development vs Production (Browser Check)

Development Build:

1. src folder is visible in DevTools
2. All component files are readable

Production Build:

1. src folder is not visible
2. Only one minified JS file exists

Performance Test Using Lighthouse

Development Build:

1. Lower performance score
2. Higher load time (example: 2.6s)

Production Build:

1. Better performance score
2. Faster load time (example: 1s)
3. Better SEO, accessibility, best practices