В процессе разработки веб-приложений мы часто говорим об оптимизации, а оптимизация часто представляет собой простой и сложный процесс. Предложение оптимизации очень широкое, и в конечном итоге оно отражает проблему взаимодействия с пользователем. Все наши оптимизации предназначены для взаимодействия с пользователем.
Почему это просто? В современной экосистеме веб-разработки есть отличные наборы инструментов, которые помогают нам выполнять некоторую практическую работу по оптимизации, напримерwebpack. Эти инструменты могут помочь нам разрешить зависимости между пакетами, уменьшить размер пакета, извлечь общие модули и так далее.
Почему это сложно? Мы говорим об оптимизации уже много лет, и пока есть пользовательская база, проблемы с оптимизацией будут всегда. Работа по оптимизации включает в себя широкий спектр областей и содержит много факторов, иногда необходимо провести специальную работу по оптимизации для конкретных сценариев, поэтому это очень сложно.
Будь то простое или сложное, мы, как программисты, должны провести некоторую работу по оптимизации в пределах наших возможностей.Эта статья является исследовательской темой.Я надеюсь, что большинство пользователей сети смогут оставить некоторые свои мысли в области сообщений.
Code Splitting
Речь идет не о том, как писать высокопроизводительный код, а о том, как устроен код, который мы пишем. здесь сwebpackДля инструмента сборки (версия 4.19) это объясняется ниже.webpackРабота по оптимизации, которую мы должны сделать.
webpackотv4С момента запуска версии было проделано много работы по оптимизации, подробнее см.здесь. мы принимаемCode SplittingГоворя о,Code SplittingдаwebpackВажная функция компиляции, которая может помочь нам распаковать код и извлечь общий код. Используя эту функцию, мы можем выполнять больше работы по оптимизации и сокращать время загрузки, например загрузку по запросу. пока вwebpackоткрыть вCode SplittingТоже очень просто, это готовый плагин, пример кода такой:
module.export = {
// ...
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
вышеchunksРекомендуется настроить конфигурацию какall, пожалуйста, обратитесь к:splitChunks.chunks
Вот эталонный результат: до и после настройки
Очевидно, есть еще несколькоvendors~документ Word, и вы найдетеappЭтот файл был извлеченvendors~app~react_vendorиvendors_app_redux_vendorэти два файла. Что касается самого большого файла, то почему до сих пор1.02M, мы можем использоватьanalyzeЧтобы проанализировать структуру пакета, здесь из-за включенияantdдокумент.
В самом процессе разработки маршрутизацию также необходимо проводитьCode Splitting, в прошлом мы часто использовалиbundle-loader, чтобы помочь нам с разделением кода, он основан наrequire.ensureинтерфейс для реализации. Теперь, когда мы можем разделить маршрут на код, можем ли мы загружать компоненты на странице маршрута по запросу, чтобы добиться разделения кода? Ответ очевиден.
Таких бизнес-сценариев также много. Здесь я приведу пример страницы входа. Существует множество способов входа. Самые распространенные из них — вход в учетную запись и вход по скан-коду. По умолчанию — вход по скан-коду. Когда пользователь не выбирает учетную запись для входа в систему, само собой разумеется, что мы не можем загрузить эту часть кода, тем самым сокращая время загрузки и оптимизируя взаимодействие с пользователем. Мы рекомендуем этокомпонентный уровеньРазделение на разделение, максимальное уменьшение размера страницы.
существуетReactХотя вы также можете использоватьbundle-loaderдля достижения разделения кода на уровне компонентов, но также будут некоторыепроблема. Позже,React RouterОфициально рекомендуетсяreact-loadableдля разделения кода. настоятельно рекомендуетсяReactПользователи используют эту очень мощную библиотеку, основанную наimport()выполнить. Он может выполнять мощные функции, такие как предварительная загрузка, перезагрузка и т. Д.
Tree Shaking
Если вы хорошо знаете код, который вы написали, вы можетеpackage.jsonдобавлено вsideEffectsвключитьTree Shaking, то есть оптимизация встряхивания дерева, которая помогает нам удалить часть неиспользуемого кода. Я не буду вдаваться в подробности здесь, вы можете нажать здесь для деталейTree Shaking.
Dynamic import
говоря оCode Spliting, мы должны подуматьdynamic import, в предыдущих версияхwebpack, мы хотим добиться динамической загрузки, используяrequire.ensure, а в новой версии вместоimport(), это TC39 об использованииimport()предложение, в то время как текущееimport()Совместимость следующая:
import()вернутьPromise, если вы хотите использовать его, обязательно поддержитеPromiseили использоватьPolyfill, пытаюсь использоватьimport()Прежде чем использовать препроцессор, мы можем использовать@babel/plugin-syntax-dynamic-import плагин в помощьwebpackРазбор.webpackЧиновник дал нам одинdynamic importизПример, я не буду приводить здесь пример. использоватьimport()Мы можем легко достичьpreloadПредварительная загрузка, отложенная загрузка и вышеперечисленноеCode Splitting.
Polyfill
PolyfillТеперь это не должно быть незнакомым для всех, он может помочь нам использовать некоторые функции, которые в настоящее время не поддерживаются браузерами, напримерPromise. существуетBabel, официальная рекомендация - использоватьbabel-preset-envСотрудничать.browserslistrc, разработчики могут улучшить процесс разработки, не заботясь о целевой среде. особенно вPolyfillС другой стороны, пока мы настраиваем.browserslistrc,BabelОн может разумно помочь нам самостоятельно вводить данные в соответствии с нашим настроенным списком браузеров.Polyfill,Например:
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
useBuiltInsРассказыватьbabel-preset-envКак настроитьPolyfill, здесь я настраиваю как:entry, затем вwebpackПредставлено в файле вводаimport '@babel/polyfill'Вот и все, обратите внимание, что вы не можете вводить его несколько разimport '@babel/polyfill', иначе будет сообщено об ошибке.
.browserslistrc
> 1%
Last 2 versions
На этом автоматическая.browserslistrcинъекцияPolyfill,Но с этим есть проблема, то есть во всех браузерах будетPolyfillсоюз. Характеристики каждого браузера очень разные, чтобы максимально уменьшить размер пакета, мы можем сгенерировать отдельный пакет для каждого основного браузера.Polyfill, разные браузеры загружают разныеPolyfill.
над файлом сгиба
HTML-файлы, упакованные программой SPA, как правило, очень маленькие, около 2kb, кажется, мы можем использовать этот размер для оптимизации.начальное окно перегрузкиСтуденты должны знать, что обычно это 14,6 КБ, что означает, что мы можем использовать оставшиеся 12 КБ или около того, чтобы что-то сделать.Я рекомендую встроить некоторые ключевые файлы css на первый экран (вы можете использоватьcriticalCSS), или встроенный файл инициализации css, конечно, вы можете добавить другие вещи, просто используйте его здесь в полной мере.начальное окно перегрузкихарактеристика.
Кстати, поговорим об инициализации css, вариантов инициализации css много, среди них три известных, а именно:normalize.css,sanitize.cssиreset.css. Что касается разницы между этими тремя, я буду прямоЦитировать.
normalize.css and sanitize.css correct browser bugs while carefully testing and documenting changes. normalize.css styles adhere to css specifications. sanitize.css styles adhere to common developer expectations and preferences. reset.css unstyles all elements. Both sanitize.css and normalize.css are maintained in sync.
тайник
с использованиемwebpackПосле упаковки некоторые наши файлы практически не изменятся, например те, что я перечислил здесь.react,redux,polyfillсвязанные документы.
entry: {
react_vendor: ['react', 'react-dom', 'react-router-dom'],
redux_vendor: ['react-redux','redux', 'redux-immutable','redux-saga', 'immutable'],
polyfill: '@babel/polyfill',
app: path.join(process.cwd(),'app/app.js')
}
Мы можем эффективно использовать эти неизмененные файлы.Общим (http 1.1) является установкаEtag,Last-ModifiedиCache-Control. Первые два относятся к кешу сравнения, и им все равно нужно связаться с сервером один раз, только когда сервер вернется.304, браузер прочитает кешированный файл. иCache-ControlЭто обязательный кеш, настройки сервераmax-ageЗапрос будет отправлен на сервер только по истечении установленного времени. Упакуйте это здесьchunk-hashКэш можно настроить практически идеально.
Конечно, вы также можете использоватьlocalStorageЧтобы сделать кеш, вот идея, которую я использовал для имитации механизма кеша домашней страницы Baidu. Мы можем сделать номер версии файла js в конфигурации и сохранить его на сервере и клиенте одновременно, например:
{
"react_version": 16.4,
"redux_version": 5.0.6,
"web_version": 1.0
}
Клиент сохраняет этот номер версии вcookieили другие механизмы хранения, рекомендуемые здесьlocalForageделать хранение. Сервер отображает номер последней версии в файл html, а затем сравнивает номер версии с помощью скрипта js.Если номер версии отличается, соответствующий файл js загружается, загрузка проходит успешно и затем сохраняется в локальном хранилище. Если это то же самое, файл локального хранилища берется напрямую.
Существует также сценарий кэширования, то есть прогресс некоторых обновлений API-сервера очень медленный, например, данные, к которым обращаются в течение дня, одинаковы, поэтому клиент может кэшировать запросы и перехватывать запросы, чтобы оптимизировать скорость и снизить нагрузку на сервер.
разное
Есть много других мест, которые можно оптимизировать, например, сокращение HTTP-запросов, отложенная загрузка изображений и т. д., поэтому я не буду перечислять их по одному, вы можете увидеть 34 военных устава Yahoo:
Минимизируйте количество HTTP-запросов — компромисс
использоватьCDN(Сеть доставки контента)
Укажите Expires или Cache-Control для заголовка, чтобы содержимое можно было кэшировать.
Избегайте пустых src и href
Сжать содержимое с помощью gzip
Поместите CSS сверху
Поместите JS в самый низ
Избегайте использования выражений CSS
CSS и JS во внешние файлы
Сокращение запросов DNS
Минифицировать CSS и JS
избегать прыжков
Удалите дубликаты JS и CSS
Настройка ETag
Сделать AJAX кэшируемым
Очистить выходной буфер как можно раньше
Используйте GET для выполнения запросов AJAX.
ленивая загрузка
Предварительная загрузка
Уменьшите количество элементов DOM
Разделите содержимое страницы по доменному имени
Минимизируйте количество iframe
Избегайте 404
Уменьшить размер файла cookie
Использовать домен без файлов cookie
Уменьшить доступ к DOM
Разработка интеллектуальных обработчиков событий
Замените @import на
Избегайте использования фильтров
Оптимизация изображений
Оптимизация CSS Spirite
Не масштабируйте изображения в HTML — компромиссы
favicon.ico маленький и кешируемый
Размер одного контента не должен превышать 25 КБ.
Упаковать компоненты в составной текст
напиши в конце
В Интернете слишком много статей об оптимизации, и эта статья не для того, чтобы рассказать вам, как оптимизировать, а для того, чтобы выработать привычку и осознанность при написании кода в обычное время.Делаем все возможное для оптимизациии кзнаю, почему.
Текст / GoDotDotDot
LESS is MORE
Монтаж/Флуоресценция
Автор разрешил опубликовать эту статью, и авторские права принадлежат Chuangyu Frontend. Пожалуйста, укажите источник для перепечатки этой статьи. Ссылка на эту статью:известный Sec-Fed.com/2018-09-25-…
Если вы хотите подписаться на другие сообщения с передовой линии KnownsecFED, выполните поиск и подпишитесь на нашу общедоступную учетную запись WeChat: KnownsecFED. Добро пожаловать, чтобы оставить сообщение для обсуждения, мы ответим как можно скорее.
Спасибо за чтение.