Как оптимизировать laravel + vue?

Question

[Человек]

Привет.
Есть сайт фестиваля, бекенд - Laravel, всякие ништяки типа слайдера, модалок, анимаций, галерей, форм и так далее сделано на Vue - подключается в одном месте - app.js. И как вы понимаете, сайт все время обновляется, компонентов там больше 70 + всякие библиотеки, которые тоже загружаются туда же.
И вот вопрос. Смотрю сейчас главную страницу, и вижу что куча всякого мусора туда добавляется, который никак не используется на этой странице. Как сделать так, чтобы подключать туда только необходимые компоненты?

Как вариант - да, можно создать под каждую страницу отдельный js, туда подключать только необходимые компоненты.
Но что еще можно предпринять в этом случае?

Answer 1

[Maxim Noverin]

Привет. Тебе нужно отказаться от мостика, который ларавель дает из коробки для налаживания связей с Vue. В общем, уйти от laravel-mix к vue-cli, в которой уже есть и code splitting, и динамические импорты - всё, что пожелаете. Прикладываю ссылку на видео о том, как подружить laravel и vue таким образом: https://www.youtube.com/watch?v=PJNIE8lYLMQ

Answer 2

[Человек]

Не знаю почему, здесь куратор Vue оставил комментарий по поводу компонентов и посоветовал использовать вот это.
Но если ответ и мой комментарий удалили, то этот способ мне не поможет или как? Почему вообще удалять ответ, лучше напишите, что ошиблись или еще что-то.

Comments

[JhaoDa]

Есть мнение, что автор сам удалил свой ответ.

[Сергей delphinpro]

Все верно. Асинхронные компоненты.
Дополнительно можно использовать CodeSplitting https://webpack.js.org/guides/code-splitting/

[Сергей delphinpro]

Я имею ввиду спец комментарии, для объединения мелких компонентов в чанки по своей логике

import(/* webpackChunkName: "group-foo" */ 'LoginModal');

[Человек]

В общем, спустя несколько месяцев, сделал вот примерно вот так (не могу найти статью, по которой делал, но здесь вроде все так же)
channingdefoe.com/vuejs-code-splitting-in-laravel-...

+ как я вижу, там появилась еще такая возможность
https://laravel-news.com/using-dynamic-imports-wit...

[Человек]

И забыл добавить, если используете кеширование, то в webpack.mix.js
нужно или заменить или добавить

mix.config.webpackConfig.output = {
    chunkFilename: 'js/[name].bundle.js?id=[chunkhash]',
    publicPath: '/',
};

(потратил много времени на поиск этого решения, надеюсь кому-то поможет)