Question 15828 in Laravel Question posted in
The official Laravel Documentation can be found here.

How to speed up VueJS SPA? – Laravel

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 ?

Tags:

2

Answers


  1. 0

    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'
    });
}
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search