Lazy Loading Vanilla Js с WebPack (+ Maravel Mix)

Недавно я работал над проектом, где сайт был невероятно JavaScript тяжелый, это вызвало запросить страницу ~ 3 МБ JavaScript на каждой странице нагрузки.

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

Установка

Я использую WebPack для почти всех моих проектов в эти дни. WebPack – это мощный, но откровенно боль в заднице, чтобы настроить, поэтому для навигации по этому поводу я использую Maravel Mix, который слоет конфигурацию в хороший, удобный для пользователя, скрипт.

Если у вас нет этих установленных до сих пор, вы можете заранее и получить вещи, устанавливающие, установив Laravel-Mix Отказ

npm install laravel-mix --save-dev

Сопровождается созданием webpack.mix.js Файл для дома нашей конфигурации.

touch webpack.mix.js

Мы можем настроить некоторые конфигурацию Barebones, сообщив микс, какой файл мы хотим прослушивать, а где мы хотим выводить.

const mix = require('laravel-mix')

mix.js('resources/js/site.js', 'public/assets/js')

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

Ленивая загрузка

Сладкий, у нас все настроило, что нам нужно в нашем файле WebPack. Далее нам нужно настроить, как мы собираемся ленивые нагрузки.

В приведенном выше конфиге мы ищем site.js Файл, это будет размещать нашу логику для импорта JavaScript.

Давайте сначала посмотрим на пример сценария, который мы можем захотеть импортировать.

Импортированный скрипт

Мне нравится писать свои компоненты/частичные, как классы, которые домируют всю свою логику Это останавливается, что существуют какие-либо конфликты между классами, относящимися к разным компонентам.

Я затем извлеките любой общий код в помощники .js Файл, но это статья на другой день.

Вернуться к нашей ленивой погрузке. Покажем, у нас был скрипт для обработки отзывов. Наш базовый скрипт может выглядеть что-то вроде следующего:

class Testimonials {
  constructor() {
    console.log('i load')
  }
}

export default Testimonials

Идеально, у нас есть класс, и мы экспортируем его для использования.

Site.js.

В нашем главном файле, если JavaScript был глобальным и использован на каждой странице, мы можем сделать что-то вроде простого импорта и инициализации.

import Testimonials from  './partials/Testimonials'

new Testimonials()

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

Мы могли бы сделать это одним из многих способов, но принципиально мы просто убедившись, что элемент существует в доме.

import Testimonials from  './partials/Testimonials'

if (document.querySelector('.testimonials')) {
    new Testimonials()
}

Хорошо, но мы еще не там. Мы все еще приносим JavaScript в наше главное расслоение. Даже если мы не называем код, это все еще там занимает пространство.

Чтобы убедиться, что мы загружаем только JS при необходимости, нам нужно переписать наши Импорт функция.

if (document.querySelector('.testimonials')) {
  import(
    './partials/Testimonials'
  ).then((Testimonials) => {
    new Testimonials.default()
  })
}

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

Компиляция

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

Это работает, но это не совсем чистый выход. Мне нравится держать свои частицы аккуратно, содержащиеся в собственной папке, а с лучшим именем, чем Ressional_js_partials_testimonials_js.js Отказ

К счастью, мы можем исправить это, включая небольшой комментарий в функции импорта.

if (document.querySelector('.testimonials')) {
  import(
    './partials/Testimonials' /* webpackChunkName: "partials/testimonials" */
  ).then((Testimonials) => {
    new Testimonials.default()
  })
}

Если мы перекомпилируем, мы должны видеть, что частично скомпилирован на js/partials/testimonials.js.

Как пользоваться

Нам не нужно импортировать каждую из этих частиц на страницу, если мы включаем в себя основной файл вывода, в этом случае site.js Отказ Это будет автоматически знать, где и когда импортировать дополнительные сценарии.

Если вы посмотрите на вкладку Network в вашем браузере, вы должны увидеть только этот кусок ( Partials/TestImonials.js ), загруженные, когда QuerySelector возвращает что-то.

Закрытие слов

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

Существует так много способов оптимизировать наши сайты в современной сети, однако мы иногда пропускаем эти шаги, и пользователь страдает. Для относительно небольшого изменения кода вы можете добиться некоторых больших результатов.

Не стесняйтесь делиться этим или добраться до меня в Twitter, чтобы обсудить это.

Оригинал: “https://dev.to/jackabox/lazy-loading-vanilla-js-with-webpack-laravel-mix-1dkh”