Performance and Production Optimization

Introduction & Lesson Overview

Welcome back! In the previous lessons, you explored advanced composable patterns, learned how to share state across components using provide and inject, and created custom directives to extend your Vue templates. These skills are essential for building scalable and maintainable applications. As you continue your journey toward production-ready Vue apps, it is important to focus on another critical aspect: performance and production optimization . In real-world applications, performance is not just a nice-to-have — it is a requirement. Users expect fast load times, smooth interactions, and data that persist across sessions. As your application grows, you need to make sure it remains responsive and efficient, both for your users and for your development team. In this lesson, you will learn how to optimize your Vue app by using route-level code splitting, lazy loading, and advanced reactivity techniques. You will also see how to persist state using local storage, making your app more robust and user-friendly. By the end of this lesson, you will understand how to: Reduce your app’s initial load time with lazy-loaded routes. Use shallowRef to optimize reactivity for large lists. Persist and synchronize state with local storage for a production-ready experience. Let’s dive in and see how these techniques can make your Vue applications faster and more reliable.

Route-Level Code Splitting And Lazy Loading

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Enhancing Reactivity With shallowRef In Composables

In previous lessons, you learned about Vue’s reactivity system and how to use ref and reactive to manage state. As your application grows, you may find yourself working with large lists or complex data structures. In these cases, using the standard ref can sometimes lead to unnecessary reactivity and performance issues, especially if you do not need to track changes to every nested property.

This is where shallowRef comes in. The shallowRef function creates a reactive reference, but only makes the top-level value reactive. Nested objects or arrays inside the value are not deeply reactive. This can lead to significant performance improvements when working with large lists, because Vue does not need to track every change inside the list — only when the list itself is replaced.

Let’s review the useTodos composable from your project:

JavaScript

import { shallowRef, computed } from 'vue';
import { useLocalStorage } from './useLocalStorage';

// Using shallowRef for large lists can improve performance.
// It only makes the top-level value reactive, not the nested objects.
const todos = shallowRef([]);
const filter = ref('all');

export function useTodos() {
  useLocalStorage('my-todos-app', todos);

  const nextTodoId = computed(() => (todos.value.length ? Math.max(...todos.value.map(t => t.id)) + 1 : 1));
  const activeCount = computed(() => todos.value.filter(t => !t.completed).length);
  
  function addTodo(todoText) {
    // To trigger an update with shallowRef, we must replace the whole array.
    todos.value = [...todos.value, { id: nextTodoId.value, text: todoText, completed: false }];
  }

  function handleToggleComplete(todoId) {
    // To update an item, we map to a new array, replacing the old one.
    todos.value = todos.value.map(todo => 
      todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
    );
  }

  function handleDeleteTodo(todoId) {
    todos.value = todos.value.filter(t => t.id !== todoId);
  }
  
  // ... other functions and computed properties ...
  const completedCount = computed(() => todos.value.filter(t => t.completed).length);
  const filteredTodos = computed(() => {
    if (filter.value === 'active') return todos.value.filter(t => !t.completed);
    if (filter.value === 'completed') return todos.value.filter(t => t.completed);
    return todos.value;
  });
  function updateTodoText(todoId, newText) {
    todos.value = todos.value.map(todo => todo.id === todoId ? { ...todo, text: newText } : todo);
  }

  return { todos, filter, filteredTodos, activeCount, completedCount, addTodo, handleToggleComplete, handleDeleteTodo, updateTodoText };
}

import { shallowRef, computed } from 'vue';
import { useLocalStorage } from './useLocalStorage';

// Using shallowRef for large lists can improve performance.
// It only makes the top-level value reactive, not the nested objects.
const todos = shallowRef([]);
const filter = ref('all');

export function useTodos() {
  useLocalStorage('my-todos-app', todos);

  const nextTodoId = computed(() => (todos.value.length ? Math.max(...todos.value.map(t => t.id)) + 1 : 1));
  const activeCount = computed(() => todos.value.filter(t => !t.completed).length);
  
  function addTodo(todoText) {
    // To trigger an update with shallowRef, we must replace the whole array.
    todos.value = [...todos.value, { id: nextTodoId.value, text: todoText, completed: false }];
  }

  function handleToggleComplete(todoId) {
    // To update an item, we map to a new array, replacing the old one.
    todos.value = todos.value.map(todo => 
      todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
    );
  }

  function handleDeleteTodo(todoId) {
    todos.value = todos.value.filter(t => t.id !== todoId);
  }
  
  // ... other functions and computed properties ...
  const completedCount = computed(() => todos.value.filter(t => t.completed).length);
  const filteredTodos = computed(() => {
    if (filter.value === 'active') return todos.value.filter(t => !t.completed);
    if (filter.value === 'completed') return todos.value.filter(t => t.completed);
    return todos.value;
  });
  function updateTodoText(todoId, newText) {
    todos.value = todos.value.map(todo => todo.id === todoId ? { ...todo, text: newText } : todo);
  }

  return { todos, filter, filteredTodos, activeCount, completedCount, addTodo, handleToggleComplete, handleDeleteTodo, updateTodoText };
}

Notice how todos is created with shallowRef([]). This means that Vue will only react when the entire todos array is replaced, not when individual properties of the todo objects change. To update the list, you always create a new array (for example, using map or filter) and assign it to todos.value. This pattern ensures that your UI updates efficiently, even with large lists.

For example, when you add a new todo:

JavaScript

addTodo('Buy milk');
// todos.value is now a new array with the new todo added

addTodo('Buy milk');
// todos.value is now a new array with the new todo added

Or when you toggle a todo’s completion status:

JavaScript

handleToggleComplete(1);
// todos.value is replaced with a new array where the specified todo is updated

handleToggleComplete(1);
// todos.value is replaced with a new array where the specified todo is updated

This approach keeps your app fast and responsive, especially as your data grows. It is a simple but powerful optimization that is easy to adopt in your own composables.

Leveraging Local Storage For Persistent State

A production-ready application should not only be fast, but also provide a seamless experience for users. One way to achieve this is by persisting state across sessions, so users do not lose their data when they refresh the page or close the browser. Local storage is a simple and effective way to store data on the user’s device.

In your useTodos composable, you integrate local storage using a helper composable called useLocalStorage. This function synchronizes the todos state with the browser’s local storage, so your list of tasks is saved automatically.

Here is how it works in context:

JavaScript

import { useLocalStorage } from './useLocalStorage';

const todos = shallowRef([]);

export function useTodos() {
  useLocalStorage('my-todos-app', todos);
  // ... rest of the composable ...
}

import { useLocalStorage } from './useLocalStorage';

const todos = shallowRef([]);

export function useTodos() {
  useLocalStorage('my-todos-app', todos);
  // ... rest of the composable ...
}

When you call useLocalStorage('my-todos-app', todos), the composable will:

Load the initial value of todos from local storage (if it exists).
Watch for changes to todos and update local storage automatically.

This means that if a user adds, edits, or deletes a todo, the changes are saved locally. When they return to the app later, their list is restored.

For example, after adding a few todos, the local storage might look like this:

localStorage['my-todos-app'] = '[{"id":1,"text":"Buy milk","completed":false},{"id":2,"text":"Read book","completed":true}]'

localStorage['my-todos-app'] = '[{"id":1,"text":"Buy milk","completed":false},{"id":2,"text":"Read book","completed":true}]'

This approach is simple, but it is important to follow best practices:

Use a unique key for each part of your app’s state to avoid conflicts.
Keep the data structure simple and easy to serialize (for example, using JSON).
Be mindful of local storage limits (usually around 5MB per domain).

By combining local storage with Vue’s reactivity, you can create apps that feel fast and reliable, even without a backend server. On CodeSignal, you do not need to set up anything extra — local storage is available and ready to use.

Performance and Production Optimization

Introduction & Lesson Overview

Route-Level Code Splitting And Lazy Loading

Join the 1M+ learners on CodeSignal

Enhancing Reactivity With shallowRef In Composables

Leveraging Local Storage For Persistent State

Summary And Preparing For Practice