Эффективность многих компонентов Vue.js

Matthias S спросил: 28 апреля 2018 в 09:45 в: javascript

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

Мы не используем SPA, поэтому маршруты определены в Laravel. Поскольку некоторая копия / вставка теперь мы хотим написать все в модулях Vue.js и поместить их в один JS-файл. Он работает сейчас, поскольку до сих пор мы имеем только около 10 компонентов, но, учитывая полную переработку, мы, вероятно, закончим со 100 компонентами и более. Вопрос: Если, например, 100 компонентов упакованы в один JS-файл, Vue.js необходимо выполнить код всех из них, даже если эта страница использует только, например. 10 из них или это только код, выполняемый из тех компонентов, которые фактически используются?

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

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


1 ответ

Daniel ответил: 28 апреля 2018 в 01:04

Не существует разницы в производительности, из-за наличия 100 или 10 компонентов в одном файле.

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

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

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

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