[Vuejs]-How to speed up VueJS SPA?

by

1👍

✅

Here’s your app.js using code splitting. See if it’ll reduce your load size:

import Vue from 'vue';

const App = () => import('./App.vue');
const Link = () => import('@inertiajs/inertia-vue/Link');
const plugin = () => import('@inertiajs/inertia-vue/plugin');
const BootstrapVue = () => import('bootstrap-vue/dist/bootstrap-vue.esm');
const IconsPlugin = () => import('bootstrap-vue/dist/bootstrap-vue-icons.esm');
const Ziggy = () => import('ziggy-js');
const InertiaProgress = () => import('@inertiajs/progress');

Vue.component('inertia-link', Link)

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.use(plugin)

InertiaProgress.init()

Vue.mixin({
    methods: {
        route: (name, params, absolute) => Ziggy().then(ziggy => ziggy.route(name, params, absolute)),
    },
});

const app = document.getElementById('app')

if (app.dataset.page) {
    new Vue({
        render: h => h(App, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: name => import(`./Pages/${name}.vue`).then(m => m.default),
            },
        })
    }).$mount(app)
} else {
    const app = new Vue({
        el: '#app'
    });
}

See this: Inertia doc

-1👍

Are you loading all the pages at once?

I think you can try loading components only if required. We can use lazy loading and reduce app.js. Ref: https://router.vuejs.org/guide/advanced/lazy-loading.html#with-webpack

        render: h => h(App, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: name => require(`./Pages/${name}`).default,
            },
        })
    }).$mount(app)

This is my app.js file.

require('./bootstrap');

import {App, Link, plugin} from '@inertiajs/inertia-vue'
import Vue from 'vue'
import {BootstrapVue, IconsPlugin} from 'bootstrap-vue'
import route from 'ziggy-js';
import {Ziggy} from 'ziggy-js';
import {InertiaProgress} from '@inertiajs/progress'

Vue.component('inertia-link', Link)

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.use(plugin)

InertiaProgress.init()

Vue.mixin({
    methods: {
        route: (name, params, absolute) => route(name, params, absolute, Ziggy),
    },
});

const app = document.getElementById('app')

if (app.dataset.page) {
    new Vue({
        render: h => h(App, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: name => require(`./Pages/${name}`).default,
            },
        })
    }).$mount(app)
} else {
    const app = new Vue({
        el: '#app'
    });
}

Leave a comment