У меня есть веб-сайт, написанный на 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 активно обновляется и совершенствуется, чтобы соответствовать современным стандартам.
Вы загружаете все страницы сразу?
Я думаю, вы можете попробовать загружать компоненты только в случае необходимости. Мы можем использовать ленивую загрузку и уменьшить 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