предисловие
Всем привет, я wangly19, эксперт по рыбной ловле. В последнее время я был занят проектами с открытым исходным кодом, а также итеративной проблемой проектов компаний, из-за чего частота обновления статей была немного ниже. Давайте поговорим о том, что я делаю тоже.
Первое, что нужно сделать, это сравнить мою кастрированную версию UI Design, чтобы начать разработку Vue3.0, поэтому я недавно наблюдал за Vue3.0. Вторая — это библиотека методов, поддерживающая пользовательский интерфейс, тоже недавний мой проект — небольшая штука, созданная Typescript. Надеюсь, что это может помочь вам всем.
рамки элегантностиUI:Репозиторий на гитхабе
Статья делает, делает Vue Performance оптимизацию поста, чтобы сделать справочный документ на будущее на линии, чтобы сделать какой-то проект набора документов. Если вы, когда проект оптимизирован, чтобы быть справочным документом.
процесс развития
При разработке проекта мы должны обратить внимание на некоторые небольшие навыки проекта.Ниже я перечислю некоторые часто используемые методы оптимизации. В то же время старые правила, проверьте пробелы и заполните пробелы.
Предпочитаю vIf
vIf а такжеvShowПо идее все они действуют на отображение и скрытие элементов, но один напрямую в DOM, а другой через CSS.displayДля работы я использую его напрямую большую часть времени в проектеvIfиспользовать напрямую вместоvShow, только когда DOM часто отображается и скрывается, но этот сценарий очень редок, я использовал его только в приоритете push-уведомления, и проект всегда проходилWebSocketЯ столкнулся со сценарием отправки сообщений за сообщениями и часто отправлял различные типы уведомлений.
Не используйте vFor и vIf вместе
vForПриоритет на самом деле выше, чемvIFhigh, поэтому когда две директивы появляются в одном DOM, тоvForТекущий список рендеров, который нужно делать каждый разvIfсуждение. И соответствующий список тоже снова изменится, что кажется весьма неразумным. Поэтому, когда вам нужно сделать синхронные команды. Максимально используйте вычисляемые свойства.vIfСначала отфильтровываются нежелательные значения. Он выглядит следующим образом.
// 计算属性
computed: {
filterList: function () {
return this.showData.filter(function (data) {
return data.isShow
})
}
// DOM
<ul>
<li v-for="item in filterList" :key="item.id">
{{ item.name }}
</li>
</ul>
Ключ vFor избегает использования индекса в качестве идентификатора
На самом деле все знаютvForне рекомендуетсяindexиндекс какkeyЗначение, это очень хорошее понимание знаний, видно из рисунка, что когда индекс вставлен, вставьте данные, последний ключ изменился, затем текущийvForБудет на ключевых измененияхElementперерендерить, а по факту они в дополнение к вставленнымElementНи один из данных не изменился, что приводит к ненужным накладным расходам. Поэтому старайтесь не использовать индекс в качестве идентификатора, а использовать уникальное значение в данных, напримерidи другие поля.
освободить ресурсы компонента
Что такое ресурс Каждый раз, когда создается вещь, она потребляет ресурсы Ресурсы не создаются из воздуха, а выделяются. Поэтому при уничтожении компонента попробуйте уничтожить разработанные нами блоки ресурсов, такие как setInterval, addEventListener и т.д. Если вы не освободите его вручную, они все равно будут занимать часть ресурсов. Это приводит к ненужной трате ресурсов. После нескольких посещений можно предположить, что заполняемость ресурса обязательно увеличится.
Добавить событие
created() {
addEventListener('click', Function, false)
},
beforeDestroy() {
removeEventListener('click', Function false)
}
таймер
created() {
this.currentInterVal = setInterval(code,millisec,lang)
},
beforeDestroy() {
clearInterval(this.currentInterVal)
}
длинный перечень
В проекте будет много сценариев длинных списков, в отличие от обычного пейджинга, большинство фронтендов делают это.无限列表В то время большинство начинающих интерфейсов используютvForОбходя данные, тем больше возникает мысль сделать разбиение на страницы. Продолжить запрос при прокрутке внизAPI. На самом деле это тоже неразумно. С загрузкой данных будет все больше и больше DOM, что приводит к проблеме снижения производительности.Когда на странице слишком много DOM, это неизбежно вызовет определенное давление на моего клиента, поэтому для длинного списка рендеринг При удалении DOM рекомендуется удалить DOM, аналогично режиму ленивой загрузки изображений, только тот DOM, который отображается в представлении, является важным DOM. В Интернете есть несколько хороших решений, таких какvue-virtual-scrollerБиблиотека и так далее, каждый может выбрать рационально.
Разумная оптимизация картинок
Картинки не должны быть вам незнакомы.На веб-страницах часто присутствует большое количество ресурсов изображений, которые могут быть большими или маленькими. Когда в DOM нашей страницы находится большое количество изображений, неизбежно, что мы не столкнемся с некоторыми проблемами медленной загрузки, что приведет к сбою загрузки изображения. Большая часть интернета использует懒加载используется только тогда, когда存在图片的DOMТолько при его появлении на странице происходит загрузка изображения, что играет роль в незаметном отвлечении трафика.Поговорим о комплексе практических решений.
- Использование маленьких значков
SVGили значок шрифта - пройти через
base64а такжеwebpзагружать маленькие изображения - Максимально используйте cdn для больших изображений, которые можно ускорить с помощью cdn.
- Большинство фреймворков поставляются с ленивой загрузкой изображений, не беспокойтесь, найдите время, чтобы использовать их.
Маршрутизатор загружается по запросу
Для ленивой загрузки роутинга, если вы его не знаете, то действительно стоит еще раз изучить. Есть два способа маршрутизации ленивой загрузки, один из нихrequireДругойimport. При загрузке маршрута по требованию давление сервиса Vue при его первой загрузке может быть соответственно меньше, и оно не появится.超长白屏P0问题. Ниже приведены два способа записи маршрутов с отложенной загрузкой:
// require法
component: resolve=>(require(['@/components/HelloWorld'],resolve))
// import
component: () => import('@/components/HelloWorld')
Как использовать UI-фреймворк
Убедитесь, что вы используете инфраструктуру пользовательского интерфейса, напримерElement,And DesignВ ожидании фреймворка пользовательского интерфейса используйте официально представленные компоненты загрузки по запросу. Компоненты текущего фреймворка пользовательского интерфейса будут загружаться только тогда, когда он действительно используется, вместо загрузки всей библиотеки компонентов с самого начала.Все мы знаем, что фреймворк пользовательского интерфейса на самом деле очень велик по сравнению с другими вещами. Поэтому, хотя это удобно для наших разработчиков, это также создает ненужные накладные расходы. Но когда проектный цикл разработан, он должен опираться на него. Поэтому рекомендуется максимально использовать загрузку по требованию. Разумный стоп-лосс для проекта, если он вас не волнует и очень хлопотно, то можно ввести глобально.
import { Button } from 'xxxx
Оптимизация выше сгиба
Как мы все знаем, когда вы открываете Vue в первый раз, если ваш проект достаточно большой, загрузка ресурсов в первый раз займет много времени. Поскольку ресурсы не загружены, DOM интерфейса не будет отображаться, что вызовет проблему с белым экраном. В настоящее время пользователь не знает, что это проблема с загрузкой, поэтому это принесет неприятный опыт. Поэтому анимация загрузки обычно пишется под общедоступным, чтобы сообщить пользователю, что веб-страница загружается. Когда страница успешно загружена, опыт, отображаемый страницей, намного лучше, чем ожидание загрузки белого экрана. Поэтому рекомендуется, чтобы каждый разработал метод загрузки своей компании и поместил его в index.html.
процесс проекта
Свернуть JS-файлы
Упакованные файлы JavaScript могут быть обработаны веб-пакетом, чтобы сделать их более оптимизированными. В настройках можно сделать
config.optimization.minimize(true);
Сжатие ресурсов изображения
в состоянии пройтиimage-webpack-loaderПлагин упакован сжатой картинкой, картинка как бы загружается с рядом апгрейда. Если боитесь разбить картину, можете с ее помощью отказаться.
"$ yarn add image-webpack-loader
- - QAQ
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()
Публичный код упаковки
существуетwebpack4, пройти можноoptimization.minimizeУпакуйте публичный код.Хотя лично я считаю, что эта штука имеет ограниченное влияние на SPA-приложения, но это лучше, чем ничего.Каким бы маленьким ни был текст, это не мясо.Поэтому контроль деталей всегда бесконечен.. Но в webpack4 CommonsChunkPlugin также заменен на SplitChunksPlugin. Чувство напоминания, чтобы прокомментировать копание друзей.
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor','runtime'],
filename: '[xxxxx].js'
})
удалить код осадков
использоватьTree-ShakingПлагин может очистить бесполезный отстойный код.
Ускорение CDN библиотеки зависимостей
Видя, что некоторые мелкие партнеры используют CDN для внедрения некоторых пакетов зависимостей, я чувствую себя оченьNice, а потом я тоже начал его использовать. мне нужноVue Axios EchartsИ так далее раздельно.В формальной среде через CDN действительно есть какие-то явные улучшения, так что попробовать может каждый.
Адрес CDN LinkDI:BootCDN
// 在html引入script标签后。在vue的配置中，进行声明
configureWebpack: {
externals: {
'echarts': 'echarts' // 配置使用CDN
}
}
GZIP
Эту штуку нужно настраивать на бэкенде, конечно, если у вас операцииNginxЕсли у вас есть разрешение, то вы можете открыть его самостоятельно. Во всяком случае, я думаю, что эта вещь все еще является большим улучшением. Смотрите эту статью для деталей. Я не буду идти в слишком много подробностей на этом здесь.Практика оптимизации проекта под Vue CLI 2&3 - CDN + Gzip + Prerender
позже
Оптимизация проекта очень важна, и за каждое улучшение отвечает пользователь. Эта статья представляет собой небольшое резюме по оптимизации, на все из которых необходимо обратить внимание при разработке. Если вы действительно хотите поиграться с оптимизацией, это на самом деле очень сложно. Вам нужно иметь много всесторонних знаний, а не читать одну или две статьи и говорить, что вы профессионал. Ни одна технология не может быть освоена случайно, если ее ценность невелика. Или что-то обязательное. Таким образом, оптимизация производительности по-прежнему требует от каждого выработать хорошие привычки кодирования в ежедневных проектах с высокой связностью и низкой связанностью. Избегайте мертвого кода. Они солиднее любых постобработок.
"Если вы найдете это полезным, пожалуйста, как это. Есть хороший метод, вы тоже можете прокомментировать, чтобы я тоже мог его изучить.
- - QAQ
Ниже приведены некоторые рекомендуемые статьи по оптимизации, которые лично я считаю очень полезными.
В этой статье используетсяmdniceнабор текста