How to make your Vue apps smaller and faster.

Some things are bigger than others.
<script src="/js/chunk-vendors.cb6c71e5.js"></script>
<script src="/js/app.ccdd4101.js"></script>

Dynamically loading routes is not the whole answer

import { createRouter, createWebHistory } from 'vue-router'import HomePage from './views/HomePage.vue'
import ContactPage from './views/ContactPage.vue'
const router = createRouter({
history: createWebHistory('/'),
routes: [
{ path: '/', name: 'home', component: HomePage },
{ path: '/contact', name: 'contact', component: ContactPage }
]
}
import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({
history: createWebHistory('/'),
routes: [
{ path: '/', name: 'home',
component: () => import('./views/HomePage.vue') },
{ path: '/contact', name: 'contact',
component: () => import('./views/ContactPage.vue'}
]
}
...
component: () => {
console.log('loading contact page now')
return import('./views/ContactPage.vue')
}
...
...
component: () => {
console.log('loading contact page now')
return import(/* webpackChunkName: "contact" */ './views/ContactPage.vue')
}
...

Small bundle, slow load

Detect when components are needed

<template>
<div class="view-detector">
<div class="facade">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
mounted() {
window.addEventListener('scroll', this.onscroll, { passive:true})
},
methods: {
onscroll() {
let bb = this.$el.getBoundingClientRect()
let btop = window.innerHeight
if(bb.bottom >= 0 && bb.top <= btop){
this.$emit('seen')
window.removeEventListener('scroll', this.onscroll)
}
}
}
}
</script>
<style>
.facade{
height:600px;
background-color:#ddd;
}
</style>

Asynchronously load dynamic components

<view-detector v-on:seen="sawitem = true">
<complex-component v-if="sawitem"></complex-component>
</view-detector>
import ViewDetector from './ViewDetector.vue'
import { defineAsyncComponent } from 'vue'
export default {
components: {
ViewDetector,
ComplexComponent: defineAsyncComponent(
() => import('./ComplexComponent.vue')

)
},
data() {
return {
sawitem: false
}
}
}
ComplexComponent: () => import('./ComplexComponent.vue')
  1. The code for our complex component will not be loaded in our app.js, and any dependencies it uses won’t be in our chunk-vendor.js, so our initial load will be smaller.
  2. The code for the visible part of the page will be in those chunks, and will load very fast.

--

--

--

Lifelong developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

All you need to know about Tables in Ballerina!

Creating a Side Menu Component With Stencil using Events, Listen, and <slot />

The dev.to project with GatsbyJS-30

My Notes on npm and Yarn. You’re Welcome!

Relaying Data through a Backend API

Custom action after an API CAll

Some Important Topics of JavaScript

Easy and reusable Media Query Breakpoints for your CSS-In-JS components

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Mold

David Mold

Lifelong developer

More from Medium

How to handle PWA and API in the same domain(origin)?

OnLine and OffLine Detection Web navigator API using VueJS

Getting Started with GSAP: A Practical Guide

Vue I18n translations in multiple files