Впервые опубликовано на GitHub:GitHub.com/Саймон Чжан и ...

оптимизация времени выполнения

1. Используйте v-if вместо v-show

Разница между ними заключается в следующем: v-if не отображает DOM, v-show предварительно визуализирует DOM.

除以下情况使用v-show, попробуйте использовать v-if в других случаях

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

2 необходимо добавить ключ v-for и избегать использования v-if

Как правило, мы склонны делать это в двух распространенных ситуациях:

Чтобы отфильтровать элементы в списке Например v-for="user in users" v-if="user.isActive". В этом случае, пожалуйстаusersзаменяется вычисляемым свойством (например,activeUsers), который возвращает отфильтрованный список
Чтобы избежать отображения списков, которые должны быть скрыты Например v-for="user in users" v-if="shouldShowUsers". В этом случае, пожалуйстаv-ifПерейти к элементу-контейнеру (например, ul, ol)

3. Событие уничтожено во времени

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

То есть использование addEventListener и других методов в js не будет автоматически уничтожено, нам нужно вручную удалить прослушиватели этих событий при уничтожении компонента, чтобы избежать утечек памяти, таких как:

created() {
  addEventListener('touchmove', this.touchmove, false)
},
beforeDestroy() {
  removeEventListener('touchmove', this.touchmove, false)
}

Оптимизация выше сгиба

1. Обрезка изображения с помощью webp

Изображение должно быть обрезано, обычно используется двойное изображение.
попробуйте использовать изображения webp
Если вы используете плагин vue-lazyload, вы можете использовать следующий метод, чтобы заменить webp одним щелчком мыши (замените изображение с помощью команды v-lazy)

Vue.use(VueLazyload, {
  error: require('./assets/img/defaultpic_small.png'),
  filter: {
    webp (listener: any, options: any) {
      if (!options.supportWebp) return
      // listener.src += '.webp'
    }
  }
});

2. Предварительный запрос ресурсов

После тестирования порядок загрузки каждого файла в проекте Vue следующий: router.js, main.js, App.vue, [page].vue, [component].vue, как показано на рисунке:

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

import Router from 'vue-router'
import store from './store'

store.dispatch('initAjax')

3. Асинхронная маршрутизация

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

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

Как использовать:

{
  path: '/order',
  component: () => import('./views/order.vue')
}

4. Асинхронные компоненты

Компоненты, которые не нужно загружать на первом экране, загружаются с использованием асинхронных компонентов (таких как несколько вкладок), включая действия, требующие условий срабатывания, а также используются асинхронные компоненты (такие как всплывающие окна). Метод использования: v-if для управления временем отображения, и можно ввести обещание компонента.

<template>
  <div>
    <HellowWorld v-if="showHello" />
  </div>
</template>
<script>
export default {
  components: { HellowWorld: () => import('../components/HelloWorld.vue') },
  data() {
    return {
      showHello: false
    }
  },
  methods: {
    initAsync() {
      addEventListener('scroll', (e) => {
        if (scrollY > 100) {
          this.showHello = true
        }
      })
    }
  }
}
</script>

5. Используйте легкие плагины, асинхронные плагины

Используйте webpack-bundle-analyzer, чтобы просмотреть размер всех пакетов в проекте и попытаться найти облегченные альтернативы для больших пакетов плагинов.
Плагины, которые не используются на первом экране, или плагины, которые используются только в определенных сценариях, используют асинхронную загрузку (например, плагины позиционирования, в некоторых случаях широта и долгота могут быть переданы через URL-адрес; или создание графических плагинов, которые должны запускаться при нажатии); сначала плагины После первой загрузки он кэшируется локально. Использование выглядит следующим образом:

// 以定位插件为例
const latitude = getUrlParam('latitude')
const longitude = getUrlParam('longitude')
// 如果没有经纬度参数，则使用定位插件来获取经纬度
if (!latitude || !longitude) {
  // 首次加载定位插件
  // webpack4写法，若使用webpack3及以下，则await import('locationPlugin')即可
  if (!this.WhereAmI) this.WhereAmI = (await import('locationPlugin')).default
  // do sth...
}

6, публичный CDN

Использование общедоступных ресурсов CDN может сыграть роль кэширования и уменьшить объем упаковки.

Оптимизация сети

1. Уменьшите сетевые запросы

Браузер имеет определенное количество запросов (обычно 6) для одного и того же доменного имени одновременно, и запросы, превышающие лимит, будут заблокированы.

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

2. Разумное использование preload, dns-prefetch, prefetch

Preload имеет более высокий приоритет загрузки, он может использовать время пробела для предварительной нагрузки ресурсов, отдельную нагрузку и выполнение, не блокируя рендеринг и документ о событиях Onload
Каждый раз, когда вы подключаетесь к доменному имени, требуется разрешение DNS.Используйте dns-prefetch для предварительного разрешения DNS доменного имени.
prefetch будет предварительно загружать некоторые ресурсы, которые страница может использовать в будущем, с более низким приоритетом; не рекомендуется для проектов с высокими требованиями к рендерингу первого экрана

Способ использования тройки добавлен в теге head (vue-cli-3 настроен соответствующим образом):

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="icon" href="/dist/favicon.ico" />
  <!-- dns-prefetch写法 -->
  <link rel="dns-prefetch" href="//www.dpfile.com" />
  <title>md-config</title>
  <!-- preload写法，as属性必须 -->
  <link href="/dist/css/app.52dd885e.css" rel="preload" as="style" />
  <link href="/dist/js/app.05faf3b5.js" rel="preload" as="script" />
  <link href="/dist/js/chunk-vendors.04343b1f.js" rel="preload" as="script" />
  <!-- prefetch写法 -->
  <link href="/dist/js/chunk-vendors.04343b1f.js" rel="prefetch" />
</head>

3. ПВА

PWA поддерживает кеширование HTML-документов, интерфейсов (получение) и т. д., что сокращает время отображения страницы на белом экране. Таким образом, страница может отображаться быстро даже в случае слабой или даже отключенной сети.

Компиляция и оптимизация пакетов

1. Обновите Vue-Cli-3

vue-cli-3 принимает webpack4+babel7, сделал множество оптимизаций при компиляции и упаковке (многократное улучшение), использует пряжу в качестве инструмента управления пакетами и сделал конфигурации по умолчанию для многих передовых методов оптимизации.

После тестирования, после переноса проекта с vue-cli-2 на vue-cli-3 скорость меняется на:

Время компиляции: 44 с --> 7 с Время упаковки: 55 с --> 11 с

Повышение эффективности очень очевидно

2. ССР

Для проектов с высокими требованиями к производительности загрузки рекомендуется обновить SSR.