Сводка по оптимизации производительности Vue

Vue.js

Оптимизация компонентов

В общем, вам не нужно слишком заботиться о производительности vue во время выполнения, он очень быстр во время выполнения, но за счет относительно медленной инициализации. Давайте сначала рассмотрим распространенный метод написания Vue: поместите компонент приложения в html, а компонент приложения ссылается на другие подкомпоненты, чтобы сформировать дерево компонентов с приложением в качестве корневого узла.

 <div id="app">
    <router-view></router-view>
  </div>

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

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

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

new Vue({
    components: {
        A: { /*component-config*/ },
        B (resolve) {
            setTimeout(() => {
                resolve({ /*component-config*/ })
            }, 0);
        }
    }
})

или

const Foo = resolve => {
  // require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
  // （代码分块）
  require.ensure(['./Foo.vue'], () => {
    resolve(require('./Foo.vue'))
  })
}  
const Foo = resolve => require(['./Foo.vue'], resolve)   
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

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

Блокировать компоненты в группы

Иногда нам нужно упаковать все компоненты маршрута в один и тот же асинхронный фрагмент. Просто дайте чанку имя и укажите третий параметр require.ensure в качестве имени чанка:

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

Используйте v-if и терминал

 <head>
   <!--some component -->
  <div v-if="showB">
   <!--some component -->
    </div>
     <div v-if="showC">
   <!--some component -->
    </div>
</head>
 data: {
        showB: false,
        showC: false
    },
    created () {
        // 显示B
        setTimeout(() => {
            this.showB = true;
        }, 0);
        // 显示C
        setTimeout(() => {
            this.showC = true;
        }, 0);
    }

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

Некоторые люди могут быть обеспокоены тем, что v-if имеет процесс компиляции/выгрузки, который влияет на производительность. Но здесь не о чем беспокоиться, потому что v-if ленив и начнет инициализацию только тогда, когда значение станет истинным в первый раз.

Поддержание активности компонента

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

Базовая оптимизация

v-if v-show

Для проблем с разрешениями, если речь идет о отображении, связанном с разрешениями, несомненно, будет использоваться v-if. Без ограничений разрешений он будет выбран в соответствии с частотой кликов пользователя. V-show используется для частого переключения, а v- if используется для нечастого переключения. Здесь следует упомянуть оптимизацию. Суть в том, чтобы уменьшить общее количество DOM на странице. Я предпочитаю использовать v-if, потому что это уменьшает количество DOM и ускоряет рендеринг первый экран. Не пишите слишком много выражений и суждений в шаблоне v-if="isShow && isAdmin && (a || b)", хотя такое выражение можно распознать, но оно не является долгосрочным решением, когда выглядит неудобный, соответствующим образом написанный в методах и вычисленный и инкапсулированный в метод, преимущество этого заключается в том, что нам удобно оценивать одно и то же выражение в нескольких местах, и другие элементы с теми же полномочиями могут вызывать один и тот же метод при оценке и отображении .

Циклы должны предоставлять ключи при использовании v-for, когда это возможно, за исключением случаев, когда обход выходного содержимого DOM является тривиальным или преднамеренно полагается на поведение по умолчанию для повышения производительности. Цитата из документации vue: когда Vue.js использует v-for для обновления списка отображаемых элементов, по умолчанию используется стратегия «повторное использование на месте». Если порядок элементов данных изменен, Vue не будет перемещать элементы DOM в соответствии с порядком элементов данных, а просто будет повторно использовать каждый элемент здесь и убедиться, что он показывает каждый элемент, который был отрисован по определенному индексу. Это похоже на track-by="$index" Vue 1.x.

Этот режим по умолчанию эффективен, но работает только для выходных данных рендеринга списка, которые не зависят от состояния дочернего компонента или временного состояния DOM (например, входные значения формы).

Чтобы дать Vue подсказку, чтобы он мог отслеживать идентификатор каждого узла и, таким образом, повторно использовать и переупорядочивать существующие элементы, вам необходимо предоставить каждому элементу уникальное ключевое свойство. Идеальным значением ключа является уникальный идентификатор, который есть у каждого элемента. Какой вопрос использовать для просмотра и вычисления? Посмотрите на пример официального веб-сайта. Вычисляемое свойство в основном выполняет слой преобразования фильтра. Не добавляйте некоторые вызывающие методы. Роль наблюдения заключается в отслеживании изменений данных для изменения данных. или инициировать такие события, как this.$store.dispatch('update', { ... }) Когда запрос данных следует рассматривать в соответствии со спросом, используйте параллельный запрос обещания.

разное

Такие как оптимизация упаковки: некоторые статические модули могут быть исключены при упаковке, такие как ue, vuex, vue-router, axios и т.д., а отечественный bootcdn может быть напрямую внесен в index.html корневого каталога. В вебпаке есть экстернал, который может игнорировать библиотеки, которые не нужно упаковывать

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios'
}

Или, используя динамическую библиотеку webpack DllPlugin, упаковка выведет пакет, подобный dll (пакет dll получен из библиотеки динамической компоновки Windows), и эти коды сами по себе не будут выполняться, а в основном предоставляются для наших ссылок на бизнес-код. Упакуйте статический файл ресурсов (запущенный пакет зависимостей) отдельно от исходного файла, сначала используйте DllPlugin для упаковки статического ресурса, а затем используйте DllReferencePlugin, чтобы исходный файл ссылался на файл ресурсов. dll можно запаковать один раз, и при следующей модификации бизнес-кода она уже не будет переупаковываться, а затем внедряться в html модули

   <script src="./static/js/vendor.dll.js"></script>
    <script src="/dist/build.js"></script>

Для использования веб-пакета, пожалуйста, прочитайте книгу «Введение в веб-пакет». Другие включают оптимизацию стиля, уменьшение связанности компонентов и т. д.


Категории