Влияние на производительность многих компонентов Vue.js

Question

мы используем Laravel с Vue.js, но в течение прошлого года код стал немного грязным.Сейчас мы начинаем переписывать большую часть этого и обсуждаем, как лучше всего это сделать.

Мы не используем SPA, поэтому маршруты определены в Laravel.Поскольку было некоторое копирование / вставка, теперь мы хотим написать все в модулях Vue.js и поместить их в один файл JS.Теперь он работает, поскольку у нас всего около 10 компонентов, но с учетом полного переписывания мы, вероятно, в итоге получим 100 или более компонентов.

Вопрос: если, например, 100 компонентов упакованы в один файл JS,Vue.js должен выполнять код всех из них, даже если эта страница использует только, например, 10 из них, или только код, выполненный из тех компонентов, которые фактически используются?

Если с точки зрения производительности этоплохой выбор, есть ли альтернатива наличию каждого компонента в одном большом файле (при сохранении маршрутов Laravel)?

Заранее спасибо :-)

Answer 1

Как таковой разницы в производительности нет, если в одном файле содержится 100 или 10 компонентов.

Разница в том, что вы запрашиваете в браузере пользователя загрузку 100 компонентов вместо 10.

Кодовое разбиение файла прекрасно работает, если вы используете SPA, но если вы хотите использовать Vue на странице, это, очевидно, не идеально.

Однако вы можете сделать следующее:все компоненты должны быть загружены как один файл, и экземпляры vue, использующие их на нескольких страницах, ссылаются на них.Таким образом, когда вы переходите со страницы на страницу, вам не требуется, чтобы пользователь загружал новые наборы.

Если вы хотите добиться реального улучшения производительности, вы можете оптимизировать рендеринг настолько, насколько это возможно, так как там у вас будетнайти наиболее заметные выгоды.Одним из способов является преобразование компонентов в функциональные компоненты, что может оказать влияние, если у вас много компонентов, часто повторяющих рендеринг, но, похоже, это не так.