Привет здесь 🙂,
Надеюсь у тебя все хорошо…
Ну, не будем слишком сильно откладывать, дома ничего этого нет и перейдем к сути дела?
Вы знаете Бутстрап? Если вы занимаетесь веб-разработкой, есть большая вероятность, что да 😁.
Сегодня мы собираемся его уничтожить… на самом деле нет… мы просто увидим одну из проблем, с которой она сталкивается, и способы ее решения (частично).
Что такое Бутстрап?
Бутстрап — очень известный и широко используемый 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 и частично их решить.
Однако… нет ли способа учесть эту проблему с самого начала проекта?
Вполне возможно, я имею в виду возможное, что этому будет посвящена одна из моих следующих статей… 😁.
Хорошего дня 😁.
2024-02-28 12:04:09
1709286298
#чем #моя #проблема #Bootstrap