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

Question

[lex-fannel]

Знаю пока два способа решения этого вопроса на чистом 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 ударит по скорости?
Есть ли смысл создавать сайт первым способом или это не оптимально и плохо?
Или лучше второй способ?
Как грамотнее выстроить архитектуру?

Answer 1

[Владимир Солнцев]

Почитайте подробнее доку, вот по теме: https://webpack.js.org/loaders/file-loader/
После описания апи, внизу есть примеры разного использования. Не обязательно через js вставлять, вы в настройках вебпака указываете откуда и куда копировать картинку, в html вписываете текущий урл, при сборке пути заменяются на необходимые.

Вот еще неплохой ресурс по вебпак: https://survivejs.com/webpack/foreword/
Покрывает очень многие вопросы в достаточно сжатой форме, возможно знакомство будет удобнее как раз по этому ресурсу, чем по офф доке.

Comments

[lex-fannel]

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

Решил вопрос с помощью:
1. CopyWebpackPlugin, его настройки (во время плясок с бубном подобрал нужный паттерн, чтобы не тащил в /dist ненужные папки и файлы),
2. Все это в связке с file-loader'ом - без него в background-image невозможно было прицепить картинку, плюс надо было указать правильный context: , чтобы опять же не тащить лишние папки и получить правильный путь.
3. Отдельной точки входа для scss.

entry: {
    app: [
      './src/index.js',
      './src/style.scss'
    ]
 },

Answer 2

[kocherman]

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

Comments

[Владимир Солнцев]

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

На счет svg, рендеринг браузером и ресурсы можно ссылку на источник? Не совсем пониманию о чем вы, браузер рендерит все, не зависимо от того чем и как вы вставляете, поэтому не понятно о каком неуважении идет речь

[kocherman]

Владимир Солнцев, размещать картинки можно и рядом с кодом, если код лежит разложенный по папкам, но размещать картинки в webpack - это такое себе...
На счет svg. Формат неоднознчный. За 20 с лишним лет наплодил много диалектов. Например, сравните svg от inkscape и svg от corel draw и svg от adobe illustrator. Они разные и рендерятся просмотрщиками картинок по-разному. А некоторые svg спокойно могут повесить всю систему пустив процесс чтения в бесконечный цикл. Вот как браузер должен это хозяйство рендерить?

svg - формат сложный.

[kocherman]

Владимир Солнцев, рендерите дальше https://openclipart.org/download/318193/1554910817.svg

[kocherman]

Владимир Солнцев, https://www.openbugbounty.org/reports/629929/

[lex-fannel]

kocherman, не знал об этом, спасибо за информацию. А как тогда лучше тогда подключать SVG?
И что лучше использовать, например, для иконок соцсетей в качестве альтернативы? Font Awesome, png?

[kocherman]

lex-fannel, Векторные шрифты использовать можно, По возможности, лучше рендерить всё под все разрешения, как в приложениях под Android. Например, моя любимая клавиатура https://github.com/klausw/hackerskeyboard/tree/mas... .
Смотрите как устроена структура ресурсов. Все разложенно по папочкам.

drawable
drawable-hdpi
drawable-ldpi
drawable-mdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi

Ресурсы подгружаются из нужной папки в зависимости от размера экрана. Помимо Андройдов, также работают паки иконок во всех Linux-дистрибутивах. Либо они все расторизованны, либо они дико тормозят всю оконную оболочку.

Можно сделать как-то так. При разработке использовать SVG иконки, и написать скрипт, который будет автоматом рендерить все иконки во все нужные разрешения при деплое.

Сам по себе SVG хорошо использовать в разных Chart-диаграммах. И везде где теги svg генерируются яваскриптом. Для этих задач SVG идеально подходит.

[lex-fannel]

kocherman, спасибо за детальный разбор, не знал про такое.
То есть, как я понял, например, вставлять SVG в html напрямую как и как -код нерационально?
Лучше написать скрипт, который будет appendChild( ) этот кусок SVG-кода прямо из .js-файла, в зависимости от размера экрана? В чем тогда разница? Если я правильно понял что вы имеете в виду, конечно.

Допустим, для иконок соцсетей, мелких штук можно использовать FontAwesome. Но как быть с чем-то покрупнее. Разве не удобнее манипулировать SVG-элементом прямо из HTML при помощи CSS, как вот в этом примере: https://jsfiddle.net/rbovp93a/ Иначе как с этим работать?

[kocherman]

lex-fannel, Ну иконки же вы не будете на JS верстать. Я имел в виду, использование SVG оправдано в случаях, когда нужно отобразить графики, диаграммы, 3d-модели, 3d-карты, может какую-то анимацию. А иконки надо отдавать клиенту расторизованными. У FontAwesome в шрифте расторизованные иконки, хоть и под множество размеров. Да и цвет png-иконки из CSS задать также легко как и шрифтовой - вместо color использовать filter.

[Роман Дворянов]

kocherman, есть тулза для оптимизации SVG, унифицирует любые свг и из иллюстратора и из фигмы, вырезает растр и прочий мусор. Не стоит бояться использовать SVG в качестве графики интерфейса, с учетом того, что вектор в современных иконках гораздо меньше весит, чем gif/png/jpeg, да и с поддержкой браузерами давно все ок.
Мы давно уже перешел от png иконок к SVG, более того SVG иконки отлично анимируются с CSS

[kocherman]

Роман Дворянов, svgo - тулза паршивая. Она ломает 95% картинок с openclipart.org. При этом браузер ломает всего лишь процентов 30% изображений. Не знаю, как у вас, у меня svg выключен по умолчанию для всех сайтов, и его надо принудительно включать на каждом домене отдельно.

[Роман Дворянов]

kocherman, что это за дикий сайт с иллюстрациями для 90-х?) Это какие-то свг иллюстрации?) Иллюстрации только png/jpeg.
У нас на хай-лоад проекте все дизайнеры дрессированные, пилят отличные свг, мы не берем клипарт, чуть-чуть оптимизировал через svgo и все, на прод.

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

В svg только иконки, без растра внутри.

[kocherman]

Роман Дворянов, причем тут 90-е? вы просто не доросли до таких сайтов. Но суть не в этом, картинки то там весьма обычные, не нравится этот сайт, могу привести в примеры другие общеизвестные ресурсы: https://freesvg.org/, https://www.deviantart.com. Inkscape, Krita, CorelDraw, Illustrator - это для вас криворукий способ создания векторных изображений... Ну, извините, я тоже верстаю svg в vim, но не всем творческим людям это дано. И про opencliparts.org вы напрасно такого мнения. Сообщество существует задолго до создания habrа. А из кода некоторых svg от туда многому можно научиться, о чем не напишут нигде.

[Роман Дворянов]

kocherman, не хотел задеть ваши чувства, я больше про тот контент, который мне отобразился, в любом случае моя мысль была не в том, что свг криворукое и не блещет качеством, а к тому, что я топлю за иллюстрации в растре, так банально дешевле, а иконки интерфейса в свг. Из-за специфики своей работы, давно не имел дело с плохими свг, и наверняка также как и вы встречая невалидный свг, лезу в код и ручками делаю красиво. Возможно это какая-нибудь стадия ОКР))