Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p><strong>Недавно я завершил работу над одним своим проектом (<a>GitHub</a>), но всё же не устранил одну проблему: стили<a>Bootstrap</a>подключались слишком долго, что приводило к тому, что сперва открывается сайт без стилей, а через секунду всё выглядит нормально. Крайне неприятный момент, который я всё же решил исправить и пошёл искать решение в интернете. В данном посте я расскажу о том, как я подключал стили изначально, и о том, как решил вопрос с CSS.</strong></p>

2 <h2>Содержание</h2>

3 <ul><li><a>Как я подключал стили</a></li>

4 <li><a>Как я подключил стили</a></li>

5 <li><a>Итог</a></li>

6 </ul><h2>Как я подключал стили</h2>

7 <p>У меня был файл style.scss, в который я импортировал нужные мне компоненты Bootstrap. Этот файл я импортировал в JavaScript файл, используя<a>Webpack</a>со следующими настройками:</p>

8 <p>Всё стандартно, подобную настройку вы можете найти в каждом втором туториале по Webpack.</p>

9 <p>А так выглядит html после сборки:</p>

10 <p>Получается так, что стили добавляются после обработки js-файла, что плохо, очень плохо</p>

11 <h2>Как я подключил стили</h2>

12 <p>mini-css-extract-plugin - модуль, решивший мою проблему.</p>

13 <p>Используется он следующим образом:</p>

14 <p>Что это нам даёт? Теперь Webpack создаёт CSS-файл и подключает его к HTML, который после сборки будет выглядеть так:</p>

15 <h2>Итог</h2>

16 <p>Теперь стили загружаются сразу, что на моем проекте можно увидеть наглядно, посмотрев на кнопку загрузки файлов. У неё есть иконка, которая появляется с помощью JavaScript спустя секунду после загрузки страницы. Тоже неприятно, но уж лучше пусть долго грузится иконка, чем стили всего сайта.</p>

17 <p>На этом у меня всё, надеюсь данный пост поможет вам сэкономить время, если вы столкнётесь с подобной проблемой.</p>