В чем моя проблема с Bootstrap?

Привет здесь 🙂,

Надеюсь у тебя все хорошо…
Ну, не будем слишком сильно откладывать, дома ничего этого нет и перейдем к сути дела?

Вы знаете Бутстрап? Если вы занимаетесь веб-разработкой, есть большая вероятность, что да 😁.
Сегодня мы собираемся его уничтожить… на самом деле нет… мы просто увидим одну из проблем, с которой она сталкивается, и способы ее решения (частично).

Что такое Бутстрап?

Бутстрап — очень известный и широко используемый CSS-фреймворк, созданный Twitter в 2011 году.
Он содержит «служебные классы», которые были очень полезны до появления «флексбокс«. Это облегчило «отзывчивость» с помощью системы сетки. Другие классы позволяют легко выполнять «поля» или «отступы»…

Помимо классов полезности, существуют классы компонентовкоторые позволяют делать кнопки, карточки, “джамботроны” (да, он действительно так называется), загрузочные “спиннеры”… и т.д.

Все эти классы позволяют быстрее запустить ваш проект (я бы даже сказал «Bootstrap» 😁).

Бутстрап не так уж и плох

Честно говоря, у меня нет такого же мнения, как у «Кода Бенджамина» по поводу Bootstrap. у него очень твердое мнение по этому поводу.

На самом деле, без Bootstrap вы, вероятно, не читали бы это… этот сайт использует Bootstrap…

Вернемся в контекст того времени, вот я и в конце 2020 года, решаю полностью покинуть мир постоянных контрактов, чтобы быть на 100% независимым.
В плане, который я имел в виду в то время, я хотел красивый сайт, но прежде всего на этом сайте я хотел создать интересный контент, на самом деле идея состоит в том, что внештатная деятельность финансирует написание статей на сайте.

На этом этапе я хочу полагаться на свою собственную CMS по разным причинам, например, чтобы предлагать свой контент на нескольких языках (как сегодня происходит на французском и английском языках).

Но я не хочу тратить недели на кропотливый дизайн, я предпочитаю сосредоточиться на контенте, а не на контейнере, это дает мне то, что я могу настроить за несколько дней (V1 сайта находится в разработке в 3 дня… с блогом).
И в голове было ясно, что конструкцию и различные проблемы я исправлю позже, когда у меня будет время.

В то же время я встретил Les Frères Marchand, которые хотели выйти в Интернет… и для этого нам нужно было создать сайт, но по тем же причинам, что и мне, нам пришлось «запустить» проект, причем БЫСТРО!

Поэтому я поступил очень просто: я искал темы на «Themeforest», месяц спустя взял две темы Bootstrap, одну для этого сайта и одну для сайта «Frères Marchand».

Не будем врать, помимо Bootstrap, переделанные темы добавили еще кучу не совсем чистого кода… Помню, я сказал себе “какого черта”.

Но эй, это не имело значения, у меня был сайт, у братьев Маршан был сайт, и мы могли сосредоточиться на том, что было важно в тот момент, в обоих случаях это было создание качественного контента…

Завершая эту главу, я бы сказал, что Bootstrap позволил мне быстро начать работу (и не только он), и за это спасибо Bootstrap.

Сегодня я живу на 100% за счет своей самостоятельной деятельности (нет, никакого скрытого постоянного договора нет 😛).
Однако в жизни каждый выбор, который мы делаем, имеет свои преимущества и недостатки…

Bootstrap, проблема с весом?

И да, по умолчанию Bootstrap поставляется со всеми своими классами, которые будут загружены браузером, и в итоге вы получите CSS-файл размером 200 КБ (это пример, реальный вес Bootstrap я не измерял).

Но почему это проблема?
Это вопрос от того, у кого есть оптоволокно… 200кб, кому интересно, вот только нет.

Когда вы впервые нажимаете ссылку в Поиске Google (или на любом другом сайте, кроме Google), ваш браузер, прежде чем начать показывать вам контент, загружает и интерпретирует CSS-файл, расположенный в «голове». При оптоволоконном соединении используется новейшее и мощное оборудование, этот шаг происходит мгновенно, но не при подключении 4G (что увеличивает задержку) и тем более при подключении ADSL в сельской местности (проверено и одобрено).

Более того, на вкладке «Сеть» Chrome вы можете добровольно ограничить свое соединение, чтобы протестировать быстрое соединение 3G.

С помощью CSS-файла размером 200 КБ, который блокирует отображение, вы заставляете посетителей ждать, но в моем случае я хочу, чтобы каждый, кто дает мне время, приходил и читал мои статьи, получал наилучшие впечатления.

В то время этого не было, при ограниченном соединении приходилось ждать, сегодня с добавлением сжатия в протокол HTTP размер CSS, который вы загружаете для отображения этой страницы, составляет всего 18 КБ.

Я начал говорить об этом в Эта вещь в то время.

Я использовал два метода, этот сайт а также сайт «Frères Marchand», это Bootstrap с дополнительной темой, и как я уже говорил выше качество кода было средним.

Для сайтов/блогов
Я не заморачивался, распаковал сгенерированный файл и использовал этот инструмент.
Конечно, это стоит денег, но позволило мне уменьшить CSS, удалив неиспользуемые классы, но при этом ничего не сломав. И если мне нужно создать новые классы, я могу.

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

Небольшое дополнение:
Подумайте о том, чтобы иметь два файла CSS: один над сгибом («в заголовке»), а другой внизу страницы, что, следовательно, не блокирует отображение вашей страницы 😊.

Заключение

Мы увидели, как подойти к проблемам веса Bootstrap и частично их решить.
Однако… нет ли способа учесть эту проблему с самого начала проекта?
Вполне возможно, я имею в виду возможное, что этому будет посвящена одна из моих следующих статей… 😁.

Хорошего дня 😁.