Running and building a Vue app - Performance & Optimization

Performance: Running and building a Vue app

HIGH IMPACT

This affects the initial page load speed and runtime performance by controlling how the Vue app is compiled, bundled, and served.

Building a Vue app for production deployment

Vue

vue-cli-service build --mode production

Production mode enables minification, tree shaking, and optimizations to reduce bundle size and improve load speed.

📈 Performance Gainreduces bundle size by 50-70%, speeds up LCP by 1-2 seconds

Building a Vue app for production deployment

Vue

vue-cli-service build --mode development

Building in development mode includes extra debugging code and unminified files, increasing bundle size and slowing load.

📉 Performance Costadds 300-500kb to bundle, blocks rendering longer, delays LCP by 1-2 seconds

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Development build	Normal DOM nodes	Multiple reflows due to unoptimized scripts	Higher paint cost due to large CSS/JS	[X] Bad
Production build with optimizations	Normal DOM nodes	Minimal reflows with optimized scripts	Lower paint cost due to smaller CSS/JS	[OK] Good

Rendering Pipeline

The Vue build process affects how JavaScript and CSS are loaded and parsed, impacting style calculation, layout, and paint stages in the browser.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLarge unoptimized bundles delay JavaScript parsing and style calculation, blocking initial paint.

Core Web Vital Affected

LCP

This affects the initial page load speed and runtime performance by controlling how the Vue app is compiled, bundled, and served.

Optimization Tips

1Always build Vue apps in production mode for deployment to reduce bundle size.

2Enable hot module replacement during development to speed up code updates.

3Use code splitting and lazy loading to improve initial load performance.

Performance Quiz - 3 Questions

What is the main performance benefit of building a Vue app in production mode?

A Faster hot module replacement

B More detailed error messages

C Smaller bundle size and faster initial load

D Automatic CSS animations

DevTools: Performance

How to check: Open DevTools Performance tab, record page load, and analyze scripting and rendering times.

What to look for: Look for long scripting tasks and large layout or paint times indicating unoptimized bundles.

Practice

1. Which command do you use to start your Vue app locally during development?

easy

A. npm run preview

B. npm run build

C. npm run dev

D. npm start

Solution

1. Step 1: Understand the purpose of each command

   npm run dev is used to run the app locally for development, npm run build creates production files, and npm run preview previews the production build.

2. Step 2: Match the command to running locally

   Since running locally during development means seeing live changes, npm run dev is the correct command.

3. Final Answer:

   npm run dev -> Option C

4. Quick Check:

   Run locally = npm run dev [OK]

Hint: Run locally during development with npm run dev [OK]

Common Mistakes:

• Confusing build with dev command
• Using npm start instead of npm run dev
• Trying to preview before building

2. Which of the following is the correct command to create optimized production files for a Vue app?

easy

A. npm run dev

B. npm run build

C. npm run start

D. npm run preview

Solution

1. Step 1: Identify the command for production build

   npm run build is the standard command to create optimized files for production in Vue apps.

2. Step 2: Eliminate other options

   npm run dev runs the app locally, npm run preview previews the build, and npm run start is not a default Vue command.

3. Final Answer:

   npm run build -> Option B

4. Quick Check:

   Build production = npm run build [OK]

Hint: Build production files with npm run build [OK]

Common Mistakes:

• Using npm run dev to build
• Typing npm run start which is not default
• Confusing preview with build

3. What will happen if you run npm run preview after building your Vue app?

medium

A. It starts a local server to preview the production build

B. It rebuilds the app for development

C. It deletes the build folder

D. It runs the app in development mode

Solution

1. Step 1: Understand the purpose of npm run preview

   This command serves the production build locally so you can check how the optimized app works before sharing.

2. Step 2: Compare with other options

   It does not rebuild or delete files, nor does it run development mode. It only previews the built app.

3. Final Answer:

   It starts a local server to preview the production build -> Option A

4. Quick Check:

   Preview = local server for production build [OK]

Hint: Preview runs a local server for the built app [OK]

Common Mistakes:

• Thinking preview rebuilds the app
• Confusing preview with dev mode
• Assuming preview deletes files

4. You ran npm run build but your dist folder is empty. What is the most likely cause?

medium

A. You forgot to install dependencies with npm install

B. You ran npm run dev instead of build

C. You ran npm run preview before building

D. Your package.json has no build script defined

Solution

1. Step 1: Check if build script exists

   If npm run build runs but produces no files, likely the build script is missing or misconfigured in package.json.

2. Step 2: Rule out other causes

   Missing dependencies cause errors, not empty folders. Running dev or preview does not create build files. So missing build script is the main cause.

3. Final Answer:

   Your package.json has no build script defined -> Option D

4. Quick Check:

   Empty build folder = missing build script [OK]

Hint: Check package.json for build script if dist is empty [OK]

Common Mistakes:

• Assuming npm install fixes empty dist
• Confusing dev and build commands
• Trying preview before building

5. You want to share your Vue app with a friend but first want to check the production version locally. Which sequence of commands should you run?

hard

A. npm run build, then npm run preview

B. npm run dev, then npm run preview

C. npm run preview, then npm run build

D. npm run build, then npm run dev

Solution

1. Step 1: Build the production files first

   You must run npm run build to create optimized files for production.

2. Step 2: Preview the production build locally

   After building, run npm run preview to start a local server and check the production version before sharing.

3. Final Answer:

   npm run build, then npm run preview -> Option A

4. Quick Check:

   Build then preview to check production [OK]

Hint: Build first, then preview to check production locally [OK]

Common Mistakes:

• Previewing before building
• Running dev instead of preview for production check
• Running preview then build in wrong order