Build optimization for production in Vue - Mini Project: Build & Apply

Build optimization for production

📖 Scenario: You are preparing a Vue 3 project for production deployment. To make your app load faster and run smoother for users, you need to optimize the build process.This means setting up the project to create a smaller, faster bundle by enabling production mode and configuring build options.

🎯 Goal: Set up a Vue 3 project with a production build configuration that optimizes the output files for faster loading and better performance.

📋 What You'll Learn

Create a basic Vue 3 app with a root component

Add a configuration variable to enable production mode

Use the Vue CLI or Vite build command with production flags

Add build options to optimize the output bundle

💡 Why This Matters

🌍 Real World

Optimizing Vue apps for production is essential to deliver fast, smooth user experiences on websites and web apps.

💼 Career

Frontend developers must know how to configure build tools to optimize app performance and reduce load times in real projects.

1

Create a basic Vue 3 app

Create a Vue 3 app with a root component called App.vue that renders a <h1> with the text "Hello Vue Production". Also create a main.js file that mounts App to the element with id app.

Vue

Hello Vue Production -->

// Create main.js that mounts App to #app
// Your code here

Hint

Use createApp from Vue to mount your App component to the element with id app.

2

Add production mode configuration

In your project root, create a vue.config.js file and add a configuration object that sets productionSourceMap to false to disable source maps in production builds.

Vue

  Hello Vue Production



// No script needed



/* Optional styles */


// main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

// Create vue.config.js with productionSourceMap: false
// Your code here

Hint

Set productionSourceMap to false in vue.config.js to avoid generating source maps in production.

3

Use production build command

Add a build script to your package.json that runs vue-cli-service build to create an optimized production build.

Vue

  Hello Vue Production



// No script needed



/* Optional styles */


// main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

// vue.config.js
module.exports = {
  productionSourceMap: false
}

// Add build script to package.json
// Your code here

Hint

Add a build script in package.json that runs vue-cli-service build.

4

Add build optimization options

In vue.config.js, add a configureWebpack object with optimization settings that enable splitChunks to split vendor code and improve caching.

Vue

  Hello Vue Production



// No script needed



/* Optional styles */


// main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

// vue.config.js
module.exports = {
  productionSourceMap: false,
  // Add configureWebpack with optimization.splitChunks
  // Your code here
}

// package.json (partial)
{
  "scripts": {
    "build": "vue-cli-service build"
  }
}

Hint

Use configureWebpack in vue.config.js to add optimization.splitChunks.chunks = 'all' for better code splitting.

Practice

1. What is the main purpose of running npm run build in a Vue project?

easy

A. To create optimized files for production use

B. To start the development server with hot reload

C. To install project dependencies

D. To run unit tests on components

Solution

1. Step 1: Understand the command purpose

   npm run build compiles and optimizes the Vue app for production deployment.

2. Step 2: Compare with other commands

   Starting the dev server or installing dependencies are done with other commands like npm run dev or npm install.

3. Final Answer:

   To create optimized files for production use -> Option A

4. Quick Check:

   Build command = production optimization [OK]

Hint: Build means prepare app for production use [OK]

Common Mistakes:

• Confusing build with starting dev server
• Thinking build installs dependencies
• Assuming build runs tests

2. Which of the following is the correct way to run a production build in a Vue 3 project using npm?

easy

A. npm start build

B. npm run start

C. npm build run

D. npm run build

Solution

1. Step 1: Recall npm script syntax

   To run scripts defined in package.json, the correct syntax is npm run <script-name>.

2. Step 2: Identify the build script

   The build script is named "build", so the correct command is npm run build.

3. Final Answer:

   npm run build -> Option D

4. Quick Check:

   npm run + script name = correct command [OK]

Hint: Use 'npm run' before script name [OK]

Common Mistakes:

• Using 'npm start build' instead of 'npm run build'
• Swapping order of 'run' and 'build'
• Confusing 'npm run start' with build command

3. After running npm run build in a Vue project, which folder typically contains the optimized production files?

medium

A. src

B. dist

C. public

D. node_modules

Solution

1. Step 1: Understand folder roles

   src holds source code, public holds static assets, node_modules holds dependencies.

2. Step 2: Identify build output folder

   The build process outputs optimized files into the dist folder by default.

3. Final Answer:

   dist -> Option B

4. Quick Check:

   Build output folder = dist [OK]

Hint: Look for 'dist' folder after build completes [OK]

Common Mistakes:

• Confusing src with output folder
• Thinking public folder contains build files
• Looking inside node_modules for build output

4. You ran npm run build but the output files are very large. Which of these is NOT a recommended way to reduce the build size?

medium

A. Use code splitting to load parts on demand

B. Remove unused dependencies from the project

C. Disable minification in the build config

D. Analyze bundle size with build report tools

Solution

1. Step 1: Review optimization techniques

   Code splitting, removing unused dependencies, and analyzing bundle size help reduce build size.

2. Step 2: Understand minification role

   Disabling minification increases file size, so it is NOT recommended to reduce build size.

3. Final Answer:

   Disable minification in the build config -> Option C

4. Quick Check:

   Minification off = larger files [OK]

Hint: Minification off makes files bigger, avoid it [OK]

Common Mistakes:

• Thinking disabling minification reduces size
• Ignoring code splitting benefits
• Skipping bundle analysis tools

5. You want to improve your Vue app's production build by lazy-loading a large component only when needed. Which Vue feature helps achieve this during build optimization?

hard

A. Dynamic import with defineAsyncComponent

B. Using v-if to hide the component

C. Registering the component globally in main.js

D. Importing the component normally at the top of the file

Solution

1. Step 1: Understand lazy loading in Vue

   Lazy loading means loading a component only when needed, reducing initial bundle size.

2. Step 2: Identify correct syntax for lazy loading

   Vue supports lazy loading via dynamic import combined with defineAsyncComponent.

3. Step 3: Evaluate other options

   Using v-if only hides the component but does not delay loading. Global registration and normal import load the component eagerly.

4. Final Answer:

   Dynamic import with defineAsyncComponent -> Option A

5. Quick Check:

   Lazy load = dynamic import + defineAsyncComponent [OK]

Hint: Use dynamic import with defineAsyncComponent for lazy loading [OK]

Common Mistakes:

• Using v-if to delay loading (only hides component)
• Importing component normally loads it eagerly
• Registering globally loads all components upfront