@lex-fannel

Как лучше подключать картинки/стили: в js или в html?

Знаю пока два способа решения этого вопроса на чистом JS:

Способ 1: подключать изображения/css-стили в js-файл с помощью import.Тогда в js-файле создаем new Image(), а затем картинку надо вставлять в HTML. Всё это собирается на Webpack (собственно, гайд по Вебпаку и привел к этому вопросу). Тогда каждому компоненту свои картинки, свой js, свои стили. Каждый компонент в отдельной папке:

|– /components
| |– /my-component
| | |– index.js
| | |– index.css
| | |– icon.svg
| | |– img.png


Способ 2: картинки, например, разбиваем по папкам /header, /footer и т.д. (или скидываем в кучу), а путь к картинкам указываем в HTML в <img src="">. В итоге у нас один итоговый style.css, index.html, bundle.js и папка с картинками.

В первом варианте мы будем постоянно залазить в DOM при рендере каждого компонента страницы c помощью appendChild, insertAdjacentHTML и т.п., и хранить/генерировать часть HTML-кода в js, если вообще не весь HTML-код компонента. И так будут написаны все блоки сайта от хэдера до футера.

Насколько сильно такая работа с DOM ударит по скорости?
Есть ли смысл создавать сайт первым способом или это не оптимально и плохо?
Или лучше второй способ?
Как грамотнее выстроить архитектуру?
  • Вопрос задан
  • 222 просмотра
Пригласить эксперта
Ответы на вопрос 3
@vladdimir
Верстальщик
Почитайте подробнее доку, вот по теме: https://webpack.js.org/loaders/file-loader/
После описания апи, внизу есть примеры разного использования. Не обязательно через js вставлять, вы в настройках вебпака указываете откуда и куда копировать картинку, в html вписываете текущий урл, при сборке пути заменяются на необходимые.

Вот еще неплохой ресурс по вебпак: https://survivejs.com/webpack/foreword/
Покрывает очень многие вопросы в достаточно сжатой форме, возможно знакомство будет удобнее как раз по этому ресурсу, чем по офф доке.
Ответ написан
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Работает? Не трогай.
Самые тяжёлые операции в плане производительности - это взаимодействие с DOM.
Но иногда нужно, например, подгружать только часть контента или сначала выводить маленькие кэшированные, заблуреные, растянутые картиночки 16х16, а только потом, когда полноразмерное изображение подгрузилась - вставлять вместо заблуренных.

Так что оба метода хороши, всё зависит от задачи, стоит ли играться и настраивать webpack, чтобы вставить три картинки со статическим урлом?
Ответ написан
kocherman
@kocherman
А зачем картинки в webpack? На сколько часто обновляются скрипты в вашем приложении? Если картинки обновляются чаще ваших скриптов, то вероятно, это может быть поводом для проведения таких экспериментов, но в 99% случаях это не так. Кладите картинки как статику, тогда и кеширование будет работать, и делать ничего не надо. А вот иконки в svg Вы используете напрасно. SVG хорошо использовать генерируемыми тегами из кода на JS, а иконки должны быть отрендерены в png/gif/jpg (нужное подчеркнуть). Рендерить SVG браузером - это верх неуважения к потребляемым ресурсам посетителя вашего сайта.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы