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