Оптимизира

Леан Сасс увоз

Када користите Сасс у свом цевоводу средстава, уверите се да оптимизујете Боотстрап тако што ћете унети само @importкомпоненте које су вам потребне. Ваше највеће оптимизације ће вероватно доћи из Layout & Componentsодељка нашег bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "maps";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

Ако не користите компоненту, коментаришите је или је избришите у потпуности. На пример, ако не користите вртешку, уклоните тај увоз да бисте сачували неку величину датотеке у преведеном ЦСС-у. Имајте на уму да постоје неке зависности у Сасс увозу које могу отежати изостављање датотеке.

Леан ЈаваСцрипт

Боотстрап-ов ЈаваСцрипт укључује сваку компоненту у нашим примарним дист датотекама ( bootstrap.jsи bootstrap.min.js), па чак и нашу примарну зависност (Поппер) са нашим датотекама пакета ( bootstrap.bundle.jsи bootstrap.bundle.min.js). Док прилагођавате преко Сасс-а, обавезно уклоните повезани ЈаваСцрипт.

На пример, под претпоставком да користите сопствени ЈаваСцрипт пакет као што је Вебпацк, Парцел или Вите, увезли бисте само ЈаваСцрипт који планирате да користите. У доњем примеру показујемо како само укључити наш модални ЈаваСцрипт:

// Import just what we need

// import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/offcanvas';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

На овај начин не укључујете ЈаваСцрипт који не намеравате да користите за компоненте као што су дугмад, вртешке и описи алата. Ако увозите падајуће меније, описе алата или искачуће поруке, обавезно наведите Поппер зависност у package.jsonдатотеци.

import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))

Аутопрефикер .бровсерслистрц

Боотстрап зависи од Аутопрефикер-а за аутоматско додавање префикса претраживача одређеним ЦСС својствима. Префиксе диктира наш .browserslistrcфајл, који се налази у корену Боотстрап репо-а. Прилагођавање ове листе претраживача и поновно компајлирање Сасс-а ће аутоматски уклонити неки ЦСС из вашег преведеног ЦСС-а, ако постоје префикси добављача јединствени за тај претраживач или верзију.

Неискоришћен ЦСС

Потребна је помоћ у вези са овим одељком, размислите о отварању ПР-а. Хвала!

Иако немамо унапред направљен пример за коришћење ПургеЦСС- а са Боотстрапом, постоје неки корисни чланци и упутства која је заједница написала. Ево неколико опција:

• хттпс://медиум.цом/дварвес-фоундатион/ремове-унусед-цсс-стилес-фром-боотстрап-усинг-пургецсс-88395а2ц5772
• хттпс://лукеловреи.цом/аутоматицалли-ремовеунусед-цсс-фром-боотстрап-ор-отхер-фрамеворкс/

На крају, овај чланак о ЦСС триковима о некоришћеном ЦСС- у показује како да користите ПургеЦСС и друге сличне алате.

Минифи и гзип

Кад год је то могуће, обавезно компресујте сав код који сервирате својим посетиоцима. Ако користите Боотстрап дист датотеке, покушајте да се држите минимизираних верзија (означених екстензијама .min.cssи ). .min.jsАко правите Боотстрап из извора са сопственим системом изградње, обавезно имплементирајте сопствене минифификаторе за ХТМЛ, ЦСС и ЈС.

Фајлови који не блокирају

Иако умањивање и коришћење компресије може изгледати као довољно, стварање датотека које не блокирају такође је велики корак у томе да ваша веб локација буде добро оптимизована и довољно брза.

Ако користите Лигхтхоусе додатак у Гоогле Цхроме-у, можда сте наишли на ФЦП. метрика Фирст Цонтентфул Паинт мери време од када страница почне да се учитава до тренутка када се било који део садржаја странице прикаже на екрану.

Можете побољшати ФЦП одлагањем некритичног ЈаваСцрипт-а или ЦСС-а. Шта то значи? Једноставно, ЈаваСцрипт или стилови који не морају да буду присутни на првој боји ваше странице треба да буду означени са asyncили deferатрибутима.

Ово осигурава да се мање важни ресурси учитавају касније и да не блокирају прву боју. С друге стране, критични ресурси могу бити укључени као инлине скрипте или стилови.

Ако желите да сазнате више о томе, већ постоји много сјајних чланака о томе:

• хттпс://веб.дев/рендер-блоцкинг-ресоурцес/
• хттпс://веб.дев/дефер-нон-цритицал-цсс/

Увек користите ХТТПС

Ваша веб локација би требало да буде доступна само преко ХТТПС веза у продукцији. ХТТПС побољшава безбедност, приватност и доступност свих сајтова, а не постоји неосетљиви веб саобраћај . Кораци за конфигурисање ваше веб локације да се служи искључиво преко ХТТПС-а увелико варирају у зависности од ваше архитектуре и добављача веб хостинга, и стога су ван опсега ових докумената.

Сајтови који се сервирају преко ХТТПС-а такође треба да приступају свим стиловима, скриптама и другим средствима преко ХТТПС веза. У супротном, корисницима ћете слати мешовити активни садржај , што ће довести до потенцијалних рањивости где се сајт може компромитовати променом зависности. Ово може довести до безбедносних проблема и упозорења у прегледачу која се приказују корисницима. Без обзира да ли добијате Боотстрап са ЦДН-а или га сами услужујете, уверите се да му приступате само преко ХТТПС веза.