Примечания по оптимизации проекта Vue SPA

JavaScript CDN Vue.js Webpack

Обзор

До этого я делал проект React и проект Vue.После завершения без какой-либо оптимизации среднее время загрузки первого экрана этих двух проектов фактически достигло 20+с, что на 10с лучше, и почти на 30с быстрее., совершенно невыносимая оптимизация обязательно, в этой статье описан процесс оптимизации проекта Vue, а оптимизация проекта React будет добавлена ​​позже.

На картинке выше представлена ​​домашняя страница проекта Vue. Весь проект построен с помощью vue-cli и в основном разделен на 4 модуля. См. панель навигации в левой части страницы. Общий размер кода не слишком велик. Всего компонентов около 50. Структура проекта показана ниже.На картинке не особо большой проект, но время загрузки первого экрана такое медленное.

Прежде всего, мы должны определить, что вызывает такой медленный рендеринг верхней части сгиба? Откройте панель Chrome Network, установите флажок «Отключить кеш», обновите страницу, чтобы наблюдать за загрузкой ресурсов, и обнаружите, что виновником являются файлы app.js и vendor.js, упакованные и сгенерированные webpack.Размер vendor.js достигает 1,2 МБ. , а время загрузки превышает 20 секунд, app.js также приближается к 1M, а manifest.js не очень большой. vendor.js в основном объединяет модули, используемые в node_modules, в один js, поэтому он относительно большой, и мы также надеемся отдельно упаковать бизнес-код и сторонние ссылки.manifest.jsВключая код времени выполнения и код манифеста модуля веб-пакета, функция состоит в том, чтобы предотвратить проблему, связанную с тем, что файлы сторонних библиотек также упакованы, потому что код изменен, но файлы сторонних библиотек не изменены.

После поиска в интернете я обнаружил, что точки оптимизации в основном заключаются в следующих аспектах:

  • Включить сжатие gzip
  • Представьте CDN
  • Отложенная загрузка маршрута
  • Некоторые сторонние компоненты загружаются по требованию, а не все
  • Ресурсы изображений меньшего размера встроены в src с base64, что уменьшает количество HTTP-запросов.

Конкретная оптимизация

gzip-сжатие

Gzip — это сокращение от GNUzip, которое впервые использовалось для сжатия файлов в системах UNIX. Кодирование gzip по протоколу HTTP — это метод, используемый для повышения производительности веб-приложений, и веб-сервер и клиент (браузер) должны совместно поддерживать gzip. Текущие основные браузеры, такие как Chrome, Firefox, IE и т. д., поддерживают этот протокол. Обычные серверы, такие как Apache, Nginx и IIS, также поддерживают его.Эффективность сжатия gzip очень высока, и обычно она может достигать степени сжатия 70%. 9K после сжатия.

Я использую экспресс в бэкенде.Включить gzip очень просто.Сначала npm install сжатие для установки промежуточного ПО, а затем добавляю использование в app.js:

var compression = require('compression');
var app = express();
app.use(compression())

Перезапустите службу и наблюдайте за заголовком ответа в сетевой панели.Если вы видите поля в красном кружке ниже, это означает, что gzip успешно включен.

Представьте CDN

CDN (Content Delivery Network) — это общедоступная служба, которая имеет множество серверов, расположенных в разных регионах и подключенных к разным операторам, так называемое использование CDN, по сути, заключается в использовании CDN в качестве фасада веб-сайта. вместо прямого доступа к веб-сайту. Благодаря оптимизации TCP в CDN, кэшированию и предварительной выборке статических ресурсов, а также при доступе пользователей к CDN они будут разумно распределяться междунедавнийУзлы, уменьшают большую задержку, так что скорость доступа может быть значительно улучшена

Один из принципов состоит в том, чтобы попытаться разместить на CDN относительно большие сторонние библиотеки, чтобы сократить время запроса.BootCDNЗатем найдите ключевые слова, скопируйте ссылку и вставьте ее перед закрывающим тегом body файла index.html, как показано ниже.

Обратите внимание на то, чтобы выбрать min.js (наименьший размер), а затем установить опцию externals в webpack.base.conf.js, цель не состоит в том, чтобы упаковать эти опции из-за введения скрипта в index.html, такого как vue, будет глобальная переменная Vue exists, поэтому значение external здесь равно Vue

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

После использования cdn преимущество огромное.Соблюдайте сетевую панель, время почти ниже 50мс

Отложенная загрузка маршрута

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

Поэтому в проект вписываем index.js роутера, ставим оригинальныйimport Comp from '@/component/xxx'Изменено на следующее, элементы конфигурации vue-router остаются без изменений

//异步组件，路由懒加载
const BookMark = resolve => require(['@/components/BookMark'],resolve);
const HotBookMark = resolve => require(['@/components/HotBookMark'],resolve);
const ImportBookMark = resolve => require(['@/components/ImportBookMark'],resolve);
const Default = resolve => require(['@/components/Default'],resolve);

После упаковки проверьте файлы в папке js, указанные выше файлы будут добавлены, и каждый компонент отложенной загрузки будет генерировать js, как показано в красном поле ниже.

Загрузка третьей стороной по требованию

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

import echarts from 'echarts'

Поэтому вам нужно импортировать только используемые компоненты, как показано ниже, что может уменьшить много ненужного объема.

import echarts from 'echarts/lib/echars'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'

Изображение в base64

Маленькие картинки можно преобразовать в строки base64 и затем встроить в src img для сохранения количества http запросов.URL-загрузчик используется для обработки в webpack.Ограничение управляет порогом преобразования изображений в base64.Если меньше чем это значение, оно будет преобразовано в base64

 {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },

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

После вышеописанной оптимизации время открытия главной страницы резко падает, DomContentLoaded занимает менее 1 с, а полная загрузка менее 4 с. Больше всего времени занимает несколько больших фоновых изображений, которые изначально большие, а будет рассмотрен позже на CDN.

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

ps: webpack-bundle-analyzer — это артефакт, который может эффективно анализировать объем, занимаемый пакетом.На следующем рисунке показана структурная диаграмма окончательного оптимизированного пакета.Исходная структурная диаграмма упакованного намного больше, чем на рисунке ниже, в основном включая диаграммы , vue и vue.-маршрутизатор, модуль vuex

Размер всего оптимизированного пакета после gzip радует~

Категории