Оптимизация сайта на nuxt js

Речь пойдет о оптимизации сайта на nuxt js.

Проект написан на  фреймворках Laravel, Vue js +Nuxt js.

Цель оптимизации была в том что бы уменьшить общий размер файлов фронтенда.

Было реализовано:

1) Включили современную сборку modern

В файле nuxt.config.js

const isDev = process.env.NODE_ENV !== 'production'
...(!isDev && {  modern: 'server'}),

Суть в том чтобы сервер Node.js проверял версию браузера на основе пользовательского агента и обслуживал соответствующий современный или устаревший пакет. Ссылка на официальную документацию, здесь вы можете подробнее узнать о modern.

2) Уменьшили структуру html

В нашем случае мы убрали лишние вложенности, так же если в вашем коде имеется  тег svg, то лучше его заменить на тег img.

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px"
     y="0px"
     width="17.9px"
     height="17px"
     viewBox="0 2 17.9 17"
     style="enable-background:new 0 2 17.9 17;"
     xml:space="preserve">
    <g>    
      <path d="M9,18c-0.3,0-0.5-0.1-0.7-0.3l-6.2-7.4C1.3,9.2,0.9,8,1,6.8c0.2-2,1.8-3.5,3.7-3.7C5.1,3,5.3,3,5.6,3      c0.9,0,1.9,0.3,2.7,1l0.3,0.2l0.4,0c0.3,0,0.5-0.1,0.7-0.2c0.8-0.6,1.7-1,2.8-1c0.2,0,0.4,0,0.7,0c1.9,0.2,3.5,1.9,3.7,3.8      c0.2,1.2-0.2,2.4-1.1,3.4l-6.1,7.4l0,0.1C9.5,17.9,9.3,18,9,18z"/> 
      <path d="M5.6,4c0.9,0,1.6,0.4,2,0.8C8,5.1,8.5,5.3,8.9,5.3c0.5,0,1-0.2,1.3-0.5C10.9,4.3,11.6,4,12.5,4c0.2,0,0.4,0,0.5,0      c1.5,0.2,2.7,1.4,2.9,3C16,8,15.7,8.9,15,9.7l-6,7.2L2.9,9.6C2.2,8.8,1.9,7.9,2,6.9c0.2-1.5,1.4-2.7,2.9-2.9l0.1,0l0.1,0      C5.2,4,5.4,4,5.6,4L5.6,4 M5.6,2C5.3,2,5,2,4.6,2.1C2.2,2.4,0.3,4.3,0,6.7c-0.2,1.5,0.3,3,1.3,4.2l6.2,7.4C7.9,18.8,8.4,19,9.1,19      c0.5,0,1.1-0.2,1.4-0.7l6.1-7.3c1-1.2,1.5-2.7,1.3-4.2c-0.3-2.4-2.2-4.4-4.6-4.7C13,2.1,12.7,2,12.5,2C11.2,2,10,2.4,9,3.2      c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0C7.9,2.5,6.8,2,5.6,2L5.6,2z"/>
    </g>
</svg>

<img src="/img/cart.jpeg" alt="" >

Так вы уменьшите html структуру , еще одним минусом svg является то что вы не сможете закэшировать их отдельно от страницы.

3) Кэширование запросов

Так же отличное решение для оптимизации это кэширование запросов, но следует помнить что некорректно реализованное кэширование может только ухудшить работу сайта.

4) Bootstrap

Если вы используйте такие библиотеки как bootstrap, то подключайте только те  компоненты библиотеки , которыми пользуйтесь.

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    componentPlugins: [
      'LayoutPlugin',
      'FormPlugin',
      'FormCheckboxPlugin',
      'FormInputPlugin',
      'FormRadioPlugin',
      'ToastPlugin',
      'ModalPlugin'
    ],
    directivePlugins: ['VBPopoverPlugin', 'VBTooltipPlugin', 'VBScrollspyPlugin']
  }
}

Ссылка на официальную документацию.

5) Ленивая загрузка отдельных компонентов

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

const AppLightBox = () => import('@/components/LightBox')
const AppAuthModal = () => import('@/components/AuthModal')

components: {
  AppLightBox,
  AppAuthModal
},

6) Оптимизация css

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

7) Оптимизация плагинов

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

Старайтесь найти библиотеку которую можно подключить локально внутри компонента или страницы , а не глобально.

8) Cumulative Layout Shift

Дополнительно хотел бы написать о показателе Cumulative Layout Shift на PageSpeed Insights.

Важно что бы верстка на вашем сайте не "прыгала" при загрузке страницы, это позволит вам добиться отличных результатов в этом показателе. Подробнее можно узнать здесь.

Данные действия действительно помогли нам оптимизировать наше приложение!
Спасибо за внимание!