Образование,

Существует много споров о производительности в программной инженерии. Разработчик может написать код и отправить его; совсем другое дело — сделать его быстрее и приятнее для пользователей и следующего разработчика.

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

1. Компоненты маршрута ленивой загрузки

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

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

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

Итак, как это делается? Давайте посмотрим:

// in router.js file
import Vue from 'vue'
import Router from 'vue-router'
const Home = () => import(‘./routes/Home.vue’);
const Profile = () => import(‘./routes/Profile.vue’);
Vue.use(Router)
export default new Router({
routes: [
{ path: ‘/’, component: Home },
{ path: ‘/profile’, component: Profile }
]
})

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

// specifying the same chunk for components
const Profile = () => import(/* webpackChunkName: "profile" */'./routes/Profile.vue');
const ProfileSettings = () => import(/* webpackChunkName: "profile" */'./routes/ProfileSettings.vue');

Используя комментарий для явного указания имени чанка, webpack автоматически объединяет скомпилированные компоненты в один и тот же чанк.

2. Сократите использование внешних библиотек

В вашем веб-приложении, скорее всего, есть пакет для всего, что вам нужно, из-за массовой поддержки JavaScript и большого количества пакетов, публикуемых и ежедневно обновляемых на npm. Это замечательно, но мы не должны раздувать размер нашего приложения ненужным кодом. Более легкая упаковка почти всегда доступна.

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

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

3. Сжатие и оптимизация изображений

Размер бандла во многом определяется его изображениями. Тяжелые изображения могут замедлять работу некоторых частей приложения во время рендеринга.

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

Оптимизация изображения для локального использования

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

  1. Компрессор изображения
  2. КрошечныйPNG

Оптимизация изображений для CDN

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

CDN, вероятно, лучший вариант, если ваше приложение будет использовать около десяти или более изображений. Ниже приведены некоторые популярные платформы управления мультимедиа:

  1. Облачно
  2. Имиджкит

4. Изображения, которые загружаются медленно

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

Для ленивой загрузки изображений мы можем использовать пакет vue-lazyload. Это легкая, простая в использовании библиотека с большой гибкостью.

Монтаж:

npm i vue-lazyload

Настраивать:

// in main.js
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

Работа с v-для:

<ul>
  <li v-for="image in images">
    <img v-lazy="image.src" >
  </li>
</ul>

Работа с необработанным HTML:

<section v-lazy-container="{ selector: 'img' }">
  <img data-src="//images.com/cart1.jpg">
  <img data-src="//images.com/cart2.jpg">
  <img data-src="//images.com/cart3.png">  
</section>

Когда изображение попадает в окно просмотра, оно будет только запрашиваться. Создайте файл vue-lazyload.js с содержимым файла main.js (см. выше) в каталоге /plugins, если вы работаете над проектом Nuxt.

Плагин должен быть зарегистрирован в nuxt.config.js следующим образом:

export default {
  plugins: [
    { src: '~/plugins/vue-lazyload.js', mode: 'client' }
  ]
}

5. Используйте одни и те же функции в своих приложениях

При работе с внешними библиотеками довольно легко забыть о возможности повторного использования. На примере библиотеки Vue Notifications рассмотрим этот раздел.

Чтобы узнать больше о публикациях и узнать, смотрите эту статью.