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.