Что shopify использует для минимизации javascript и css?

У моего тестового сайта огромное время загрузки, и тесты показывают, что я могу снизить производительность, уменьшив JS и CSS-ресурсы.

Что Shopify использует для минимизации JavaScript и CSS? Спасибо

Вы сначала пробовали быстрый поиск в Google? Кроме того, судя по всему, минимизация файлов не решит вашу проблему. Минификация только сократит небольшое время загрузки, что полезно для оптимизации, и, судя по всему, это что-то происходит в вашем скрипте, чтобы гарантировать «огромное время загрузки».

John Bell 10.08.2018 16:24

да, я искал в гугле.

Zoltan TM 11.08.2018 19:16

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

Zoltan TM 11.08.2018 19:18
0
3
2 901
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Shopify не имеет возможности автоматически минимизировать ваш Javascript (вам нужно сделать это самостоятельно), но у него есть возможность автоматически минимизировать ваш CSS, присвоив ему суффикс scss, а затем включив его на свой сайт с помощью суффикс .scss.css

Итак, если ваш файл CSS в настоящее время называется theme.css.liquid и включен на ваш сайт с {{ 'theme.css' | asset_url | stylesheet_tag }}:

  • Измените имя вашего файла CSS так, чтобы оно заканчивалось на .scss (или .scss.liquid, если файл, о котором идет речь, заканчивается на .css.liquid) - в этом случае файл становится theme.scss.liquid.

  • Измените ссылку на файл так, чтобы она заканчивалась на .scss.css - в этом случае включение становится {{ 'theme.scss.css' | asset_url | stylesheet_tag }} (обратите внимание, что суффикс .liquid, если он есть, здесь не включен)

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

Однако, как упоминает Джон Белл в комментарии к вашему основному посту, минификация сама по себе, вероятно, не решит основных проблем. Если вы посмотрите на результаты водопада из вашего теста скорости, поищите файлы с длительным временем ожидания или TTFB - это файлы, компиляция которых занимает много времени, и они указывают, что ваш код Liquid - это то, что нуждается в оптимизации. Также ищите файлы с длительным временем «загрузки» и посмотрите, могут ли эти файлы быть сжатыми или только отложенными, чтобы они загружались только после завершения начальной страницы.

спасибо, приятно это знать, поэтому я минимизирую перед загрузкой

Zoltan TM 11.08.2018 19:15

Для javascript это единственный способ получить минимизированный код с помощью Shopify, исправьте :)

Dave B 13.08.2018 15:40

Кроме того, если у вас очень большие файлы javascript, имеет смысл разбить их на несколько файлов меньшего размера. Поскольку HTTP / 2 становится широко распространенным, несколько файлов меньшего размера иногда лучше, чем отдельные монолиты. См., Например, анализ на medium.com/@asyncmax/…

Dave B 13.08.2018 15:50

Другие вопросы по теме