Оптимизация первого экрана Vue SPA на практике

Vue.js

предисловие

Обычный проект vue упакован и доступен, и возвращает html, содержащий только div, а другие блоки контента динамически генерируются js.

Есть две большие проблемы:

  • плохо для SEO
  • Первый экран загружается медленно, а пользовательский интерфейс не очень хорош

Эта статья - мой собственный план, основанный на опыте проекта, если есть какие-то недостатки, пожалуйста, укажите~

оптимизация

SSR

SSR (Server-Side Rendering) – это рендеринг на стороне сервера, при котором компоненты vue преобразуются в собранные строки HTML на стороне сервера, а затем отправляются непосредственно в браузер. Наконец, эти статические теги необходимо смешивать на стороне клиента, чтобы они полностью интерактивное приложение.

После повторного развертывания проекта сборки с помощью ssr:

Вы можете видеть, что возвращаемый контент уже содержит блок html-кода содержимого первого экрана, отлично!.

Портал скорости:Небольшая демонстрация на основе vue-cli4.0+Typescript+SSR

Внедрить по требованию

Импорт по запросу с использованием модуля es6

1. При необходимости импортируйте компоненты в файл маршрутизации.

# router.index.ts
export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'Home',
        component: () => import(/* webpackChunkName: "Home" */ './views/Home.vue'),
      },
      {
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      },
    ],
  });
}

2. Статические библиотеки импортируют модули по мере необходимости, а не все

Как и в библиотеке element-ui, я просто хочу использовать компонент кнопки:

import {
  button
} from 'element-ui';

запросить оптимизацию

1. порядок размещения css, js

Файл css помещается в заголовок, а файл js помещается перед телом, но vue уже обработал его за нас~

2. Используйте значки шрифтов и изображения спрайтов для ресурсов значков

Мы знаем, что HTTP требует 3 рукопожатия для установления соединения, слишком большое количество запросов повлияет на скорость загрузки.

Мы должны попытаться уменьшить ненужные статические ресурсы, такие как значок значка на странице, как следует из изображения официального сайта Tencent:

Непосредственно импортируйте законченное изображение, согласно background-positionустановить положение изображения

Порекомендуйте сайт для создания снежной карты:CSS Sprites Generator

CDN-ускорение

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

Все статические ресурсы загружаются в CDN, что позволяет значительно повысить скорость доступа.

Без CDN:

Используйте CDN:

Видно, что после использования CDN степень загрузки значительно улучшилась.

Статическое сжатие ресурсов, включено сжатие GZIP

Сжимайте css, js, изображения и другие ресурсы, а сервер включает сжатие GZIP

Видно, что после сжатия исходный файл 1.7М становится 285кб, а объем сильно уменьшается

Оптимизация входного чанка

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

Таким образом, некоторые статические библиотеки разделены: vuejs, axios, vuex и т. д. Вы можете видеть, что браузер будет открывать несколько потоков загрузки для загрузки. Если эти статические библиотеки не разделены, входной блок будет огромным, а скорость загрузки можно себе представить~.~

Отделяем библиотеку Element-UI, среду DEV, тубу не используем, отделяем их под среду prod, просто удаляем библиотеку в конфигурации пакета VUE:

# vue.config.js
configureWebpack: {
  externals:
    process.env.NODE_ENV === 'production'
      ? {
        'element-ui': 'element-ui',
      }
      : undefined,
},

# index.html 手动引入静态资源
<script src="/js/element-ui/element-ui.2.11.1.js"></script>

мой блог

END

Категории