How to speed up VueJS SPA? - laravel

Question

I have a website written in Laravel and InertiaJS (VueJS).
It has more than 60 pages.
InertiaJS stores all pages and components in these three files:
/js/manifest.js
/js/vendor.js
/js/app.js
The problem is the size of these files (Specially app.js) are getting so huge! The app.js is about 5MB.
I removed useless plugins and libraries, Also i refactored my code and it's all clean.
When i was only using Laravel for web development, I could load each page javascript and css files in it's own page. So speed of the page was pretty good. But when i migrated to VueJS it loads app.js and styles.css at once! It also extracts all styles in one file which is not ideal.
Also i use CDN, gzip compression, SSR and they are not helping too much to have better performance.
I want extract all components and pages into different javascript/css files and load them in their own pages when needed.
How can i do that ?

Answer 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

Answer 2

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'
});
}