Где можно оптимизировать проект vue?

внешний интерфейс JavaScript Vue.js jQuery

Оптимизация изображения

  1. Оптимизация размера изображения, некоторые изображения используют WebP (необходимо учитывать совместимость с webp)

    • Онлайн-генерация, такая как Zhitu и Paiyun
    • gulp-generated, gulp-webp или gulp-imageisux
    • генерация холста

    может относиться кnuggets.capable/post/684490…

  2. Уменьшите количество запросов на изображения, используйте изображения спрайтов

    • Генерация онлайн: Генератор спрайтов, gopng Tencent, spriteme
    • Генерация кода: gulp.spritesmith или компас sass

Оптимизация производительности страницы

Ленивая загрузка изображений или компонентов

Используйте компонент vue-lazyload или какой-либо другой компонент

адрес vue-lazyload:Уууу, эта лошадь plus.com/package/v ue…

  1. Ленивая загрузка изображения: v-lazy или используйте v-lazy-container для включения группы изображений.
// 引入一张图片 
<img v-lazy="//domain.com/img1.jpg">  
// 引入一组图片
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>
  1. Ленивая загрузка компонента
Vue.use(VueLazyload, {
  lazyComponent: true
});
<lazy-component>
  <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>

Предварительная загрузка изображения

Быстро показывать картинки

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

Ленивая загрузка стороннего плагина (загрузка по требованию)

js-файлы обычно загружаются синхронно, и их размещение на странице блокирует загрузку основных js-файлов.

Сценарий использования: Когда некоторые проекты должны импортировать jquery и другие файлы, введение этих файлов внутрь компонента будет в определенной степени блокировать отрисовку страницы, поэтому через определенные события (клики или всплывающие окна) файлы JS, такие как jquery, динамически загружается, так что главная страница может отображаться быстро. .

Как асинхронно загружать страницы, как сделать так, чтобы компоненты не перекрывали друг друга

При загрузке нескольких компонентов vue и когда компоненты рендерятся с помощью данных на стороне сервера, возникает ситуация, когда несколько компонентов сначала перекрываются, а затем разделяются.

три варианта

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

  2. Когда страница зафиксирована в целом, на страницу можно добавить каркас, чтобы страница не мерцала.

    Конкретную реализацию см.сегмент fault.com/ah/119000001…

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

Уменьшить размер входящих внешних файлов

Когда проект вводит некоторый контент ElementUI, настройте файл .babelrc, добавив babel-plugin-component, чтобы можно было вводить некоторые компоненты, тем самым уменьшая размер компонента.

Маршрутизация ленивой загрузки

Но когда используется vue-router, webpack упакует все компоненты в js-файл, из-за чего файл будет очень большим, что повлияет на загрузку домашней страницы.Лучший способ — упаковать другие маршруты в разные js-файлы. . , а затем загружать соответствующий файл js при переключении маршрутов.

resolve => require([URL], resolve), 支持性好
() => system.import(URL) , webpack2官网上已经声明将逐渐废除, 不推荐使用
() => import(URL), webpack2官网推荐使用, 属于es7范畴, 需要配合babel的syntax-dynamic-import插件使用

кеш страницы маршрута

Keep-alive с помощью vue-router Кэшируйте страницу, вам не нужно перезагружать страницу при следующем открытии, и отображение будет быстрее

запросить оптимизацию

  1. кэш изображений сервера
  2. Установите кэш запроса, установите кэш-контроль
  3. Включите Gzip, сожмите ответную информацию, чтобы передача была быстрой
  4. Настроить кеш DNS
  5. Используйте HTTP2.0
Категории