Как ускорить VueJS SPA?

У меня есть веб-сайт, написанный на Laravel и InertiaJS (VueJS). В ней более 60 страниц. InertiaJS хранит все страницы и компоненты в этих трех файлах:

/js/manifest.js

/js/vendor.js

/js/app.js

Проблема в том, что размер этих файлов (особенно app.js) становится таким огромным! app.js составляет около 5 МБ.

Я удалил бесполезные плагины и библиотеки, также я провел рефакторинг своего кода, и все стало чисто.

Когда я использовал Laravel только для веб-разработки, я мог загружать файлы javascript и css каждой страницы на отдельной странице. Так что скорость страницы была довольно хорошей. Но когда я перешел на VueJS, он сразу загружает app.js и styles.css! Он также извлекает все стили в один файл, что не идеально.

Также я использую CDN, сжатие gzip, SSR, и они не слишком помогают улучшить производительность.

Я хочу извлечь все компоненты и страницы в разные файлы javascript/css и при необходимости загрузить их на свои собственные страницы.

Как мне это сделать ?

🤔 А знаете ли вы, что...
Laravel активно обновляется и совершенствуется, чтобы соответствовать современным стандартам.


84
2

Ответы:

Вы загружаете все страницы сразу?

Я думаю, вы можете попробовать загружать компоненты только в случае необходимости. Мы можем использовать ленивую загрузку и уменьшить app.js. Ссылка: 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)

Это мой файл app.js.

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

Решено

Вот ваш app.js с использованием разделения кода. Посмотрите, уменьшит ли это размер загрузки:

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

Смотрите это: Inertia doc