Чем крупнее компания и чем больше она приносит доходов, тем больше потери, когда сайт загружается медленно. Пользователи ожидают, что сайт будет загружаться быстро, и многие бренды с крупными сайтами электронной коммерции допускают большие ошибки в коде доставки, который не нужно использовать.
Если пользователи посещают ваш сайт, нет причин загружать весь код для раздела профиля пользователя сайта, если многие пользователи никогда не будут его использовать.
Многие сайты предлагают возможность оформить заказ в качестве гостя, и все же у них есть гигантские файлы для логики профиля пользователя, которые не нужно использовать, пока пользователь не войдет в систему. Было бы лучше, если бы этот код был импортирован только в том случае, если клиент создает учетную запись и авторизуйтесь.
Shopify использует рендеринг на стороне сервера (SSR). Если вы разрабатывали в Shopify, то вы почти наверняка видели журнал жидких тегов повсюду, пытающихся условно обернуть .js в зависимости от того, на каком шаблоне остановился пользователь.
Хотя это не обязательно плохо, есть более современный и лучший способ.
Допустим, у нас есть довольно сложная страница продукта с большим файлом product.js. Мы могли бы использовать что-то вроде этого в нашем коде:
Приведенный выше блок кода говорит: «Загружайте этот файл product.js только в том случае, если мы находимся в шаблоне, который называется product, и отложите его». Это хорошо, потому что теперь мы загружаем этот файл javascript, только если мы находимся на странице продукта. Но есть одна оговорка: что, если страница продукта очень сложная? Это могут быть обзоры, логика для публикации в социальных сетях, отдельная логика для рабочего стола и мобильного устройства, объединенная в один файл, и так далее.
Мы можем получить еще больше конкретики и еще больше разбить наш код с помощью специального разделения кода. Приведенный выше пример не позволяет нам разбить файл product.js.
Допустим, у нас есть приложение для обзора, которое мы создали и которое находится на странице продукта. Мы должны использовать решение только для javascript и обрабатывать его следующим образом:
Product.Liquid
ProductReview.js
Приведенный выше код является лишь небольшим примером того, что можно сделать. Это позволяет нам быть настолько конкретными, насколько нам нужно, и загружать только определенные фрагменты кода, которые нам абсолютно необходимы.
