Примечание: В этой статье немного заголовка, и многие изображения очень многословны. Учащиеся, которые не хотят видеть изображения, могут напрямую прочитать выделенное полужирным шрифтом содержание и итоговое резюме.
Я впервые пишу статью в Наггетс, если что-то не так или есть лучшее решение, прошу не давать мне морду, а сразу ставить.
Я недавно работаю над проектом.Стек технологий - это семейство Vue Bucket + Element-UI + echarts. После упаковки я обнаружил, что есть 1,44M, и первое впечатление от экрана очень плохое. Можно ли это терпеть? Решительно приступайте к оптимизации. Вот как я упаковал1.44MBПроект становится упакованным только после0.42MB, улучшение производительности70%из.
процесс оптимизации
Подготовить:
vue-cliПредоставляет очень удобную команду для просмотра объема кода после упаковки, просто добавьте команду после обычной команды упаковки.--reportВот и все, после завершения упаковки автоматически откроется страница для отображения размера каждого зависимого пакета.
npm run build --report
До оптимизации:
Давайте посмотрим на размер до оптимизации
Это файл js, загруженный на первом экране в локальном локальном хосте перед упаковкой, там только одинapp.js(3.2MB) (обратите внимание на локальный, неупакованный, несжатый)
Это скриншот после упаковки, объем1.44MB, время упаковки72s
Первая оптимизация:Отложенная загрузка маршрута
Когда дело доходит до оптимизации, первое, что нужно учитывать, это отложенная загрузка, сразу в vue и vue-router.официальная документациянашел решение в
Объедините асинхронные компоненты Vue и функцию разделения кода Webpack, чтобы легко реализовать ленивую загрузку компонентов маршрутизации.
Последний отзывrouter.js, измените все маршруты на динамическую загрузку
//router.js
//原来的写法：import Home from '@/components/PC/Home'
//改成下面这种形式（其他路由同理）
const Home = () => import('@/components/PC/Home')
Итак, первая оптимизация завершена. Давайте упакуем и посмотрим, что получится.
Две картинки выше — это ресурсы js, загруженные на первый экран перед локальной упаковкой (приблизительно рассчитанные как3.1MB) и упакованные скриншоты (1.44MB), время упаковки55s. Обратите внимание на ту часть, которую я обвел красной рамкой, по сравнению с до оптимизации упакованные результаты несколько больше.01Дождитесь js файла в начале номера, это собственно наш файл роутинга отделен, и на первом экране загружается только нужный экран0.jsа также3.jsфайл, который не будет загружен, пока мы не переключимся на другие маршруты2.jsили4.js, а не все, что содержится вapp.jsЗагрузить все сразу.
По сравнению с до оптимизации размер после упаковки не изменился, но время упаковки уменьшено, а также меньше ресурсов js, загружаемых на первый экран.0.1MB(Это не яма отец!!).
Размер пакета не изменился, а первый скрин всего на 0.1мб меньше? Эффект такой плохой, почему ты шутишь?
Не спешите бить меня, просто выслушайте мое объяснение. Размер пакета не меняется, потому что как бы лениво ни грузился роутинг, файлов роутинга по сути все равно столько, а размер остается прежним, поэтому размер не меняется. И первый скрин меньше0.1MB, потому что изначально этот проект был очень маленьким, всего 4 страницы, а домашняя страница этого проекта представляетechartsОн был относительно большим.
Таким образом, оптимизация этого шага маршрутизации ленивой загрузки полностью в порядке, эффект не очень хороший, потому что это причина моего проекта, чем меньше0.1MB— оставшийся незагруженный размер файла маршрутизации.
Если в вашем проекте много страниц, то эффект маршрутизации отложенной загрузки не должен быть плохим.
Давайте еще раз посмотрим на эту картинку
Найдите желтую коробку слева.echartsи синее поле справаelement-uiОбъем составляет большую часть, давайте сначала посмотрим на негоelement-uiприходилось556KB, На данный моментelement-uiСделайте вторую оптимизацию
Вторая оптимизация:компоненты element-ui загружаются по запросу
противelement-uiОптимизация, тут и говорить нечего, конкретный метод, смотрите прямоДокументациявнутриВнедрить по требованиюБар.
После оптимизации в соответствии с документом снова упакуйте его для просмотра результатов:
После этой оптимизации пакет используется45s, общий размер определяется1.44MBстал1.16MB
а такжеelement-uiРазмер модуля также определяется556kbстал267kb, эффект в порядке. Но насколько это улучшение удовлетворяет меня? решеноelement-ui, посмотрим на другой модульecharts:
Сравниватьelement-uiДаже больше! ! полон606kb, и немедленно нацельтесь на самого большого босса----echartsоптимизировать.
Третья оптимизация:Загружать ресурсы извне с помощью CDN
Эта оптимизация предназначена в основном дляecharts, который также упоминается в его документациинагрузка по требованию, но в этот раз нам не нужно грузить по требованию, я хочу поставитьechartsПолностью забей! На этот раз мы будем использоватьwebpackизexternals,обратитесь сюда
Предотвратите упаковку некоторых импортированных пакетов в пакеты, вместо этого получите эти внешние зависимости во время выполнения. Пакеты с внешними зависимостями можно использовать в различных контекстах модулей, таких как CommonJS, AMD, глобальные модули и модули ES2015.
конкретные методы:
первый вindex.htmlвведен вechartsвнешний CDN (если вам нужны компоненты карты, вам также нужно представить их вместе)
Это скриншот локального первого экрана загрузки ресурсов перед упаковкой.Можно подсчитать, что на этот раз общая загрузка1.31MB(не считаяecharts.min.js, потому что это ресурс CDN), относительно первого оптимизированного3.1MBУже гораздо меньше.
Скриншот после упаковки выглядит следующим образом
Видно, что упакованный объем составляет всего434.7KB, и на этот раз посылка стоила только34s, самое главное этоechartsРеально убили! !
Не удивляйтесь! ! Не удивительно! !
Столы для каждой оптимизации
Студенты, которым лень смотреть на картинку, могут непосредственно посмотреть на таблицу ниже.
#
объем после упаковки
объем после сжатия
Ресурсы первого экрана js
Время упаковки
До оптимизации
1.44M
425K
3.2M
72s
Первая оптимизация (ленивая загрузка маршрута)
1.44M
434K
3.11M
55s
Вторая оптимизация (элемент-ui загружается по требованию)
1.16M
381K
1.3M
45s
Третья оптимизация (внедрение внешнего CDN)
434K
121K
1.3M
34s
Видно, что наша оптимизация по-прежнему очень эффективна, а различные объемы и время упаковки почти сокращаются.70%о.
Суммировать
Вы должны посмотреть эту часть
Если вы столкнулись с проблемами производительности упаковки веб-пакета, сначала выполнитеnpm run build --reportАнализ волны, а потом сделать соответствующие оптимизации по результатам анализа, кто займет больший объем, тот и сделает
Маршрут много сложных страниц,Отложенная загрузка маршрутаобязательно сделает
Сейчас многие библиотеки предоставляютнагрузка по требованиюфункция, при необходимости может быть загружена по запросу согласно официальной документации
предоставлено веб-пакетомexternalsможет сотрудничатьCDN внешнего ресурсаЛегко и значительно уменьшить объем упаковки, подходит дляecharts,jQuery,lodashэтоДоступ к глобальной библиотеке переменных