Несколько распространенных методов оптимизации SPA
Уменьшить размер входного файла
Локальный кеш статических ресурсов
Включите сжатие GZip
Использовать ССР
.....
Чтобы уменьшить размер файла записи, распространенным методом является отложенная загрузка маршрутизации. После включения отложенной загрузки маршрутизации запрашиваемая страница упаковывает файл js отдельно, уменьшая файл записи index.js. После отложенной загрузки включен, js запрашивается для загрузки следующим образом:
2. Есть два способа кэшировать статические файлы локально
HTTP-кэширование, настройка Cache-Control, Last-Modified, Etag и других заголовков ответов, многие статьи более подробно описаны, рекомендуется:Блог Woohoo.cn на.com/China Java/Afraid…
Автономный кеш Service Worker, недостаток: должен находиться под HTTPS-сайтом, рекомендуется:Ли Чонг Вэй
Принципы включения сжатия GZip и использования SSR относительно просты, и легко представить, как эти два метода улучшают скорость загрузки страницы.
Но в дополнение к вышеперечисленным методам нельзя недооценивать еще одно оптимизационное решение, которое я использовал и понял в недавней разработке проекта. Сначала поговорим о том, как загружаются данные страницы в обычном проекте: асинхронный интерфейс запрашивается в жизненном цикле Vue-компонента, и он должен быть возможен до монтирования.Насколько мне известно, большинство студентов выполняют асинхронные запросы, когда они установлен. Но мы можем поместить запрос, требуемый страницей, в защиту Vue-Router для выполнения, что означает, что данные, требуемые всеми компонентами на странице для загрузки, могут быть запрошены до маршрута перед входом.В это время компонент Vue загружаемой страницы еще не начал рендеринг Когда компонент Vue начинает рендеринг, мы можем использовать данные в Vuex.
Реализация вышеуказанного метода:
На намерение: на каждой странице будет много валютных компонентов, вы можете добавить пользовательский атрибут fetchdata в компонент Vue, а асинхронные запросы могут быть выполнены в fetchdata (действие vuex выполняется на рисунке), но как Мы получаем все компоненты Fetchdata метод и выполнить его? Как показано на рисунке, в маршрутизаторе. BeforerEsolve Guard, мы смотрим на определение маршрутизатора. После всех составных охранников и асинхронных компонентов маршрутизации разрешаются, вызывается охранник разрешения, что означает, что даже если есть асинхронные Компоненты на странице, он будет выполняться после ожидания асинкового компонента для разрешения, а решающий охранник выполняет перед Reseeper. Итак, как мы получаем все компоненты страницы, которые будут загружены в анализу? Через маршрутизатор. Метод MetsMatchedComponents.
Полный пример:
Таким образом, мы можем получить и выполнить метод fetchData всех компонентов, которые должны быть загружены в охрану синтаксического анализа, который, несомненно, получит все данные после того, как компонент начнет рендеринг, и улучшит скорость загрузки страницы.
У многих может возникнуть вопрос, если асинхронный запрос помещается в beforeCreate и создается, разве это не одно и то же? Ответ отрицательный, потому что таким образом вы можете поместить асинхронный запрос перед beforeCreate!