Vue.js 2 Design Patterns and Best Practices

Lazy loading routes

We can also lazy load our routes to take advantage of code splitting with webpack. This allows us to have greater performance than when eagerly loading our routes. To do this, we can create a small playground project. Run the following in your Terminal:

# Create a new Vue project$ vue init webpack-simple vue-lazy-loading# Navigate to directory$ cd vue-lazy-loading# Install dependencies$ npm install# Install Vue Router$ npm install vue-router# Run application$ npm run dev

Let's start off by creating two components, named Hello.vue and World.vue, inside src/components:

// Hello.vue<template>  <div>    <h1>Hello</h1>    <router-link to="/world">Next</router-link>  </div></template><script>export default {};</script>

Now we have created ...