Оптимизирај

Увоз на Lean Sass

Кога користите Sass во вашата линија на средства, погрижете се да го оптимизирате Bootstrap само @importсо внесување на компонентите што ви се потребни. Вашите најголеми оптимизации најверојатно ќе дојдат од Layout & Componentsделот на нашата bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@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";

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

Посно JavaScript

JavaScript на Bootstrap ја вклучува секоја компонента во нашите примарни датотеки со растојание ( bootstrap.jsи bootstrap.min.js), па дури и нашата примарна зависност (Popper) со нашите пакет-датотеки ( bootstrap.bundle.jsи bootstrap.bundle.min.js). Додека прилагодувате преку Sass, задолжително отстранете го поврзаниот JavaScript.

На пример, под претпоставка дека користите сопствен пакет за JavaScript како Webpack или Rollup, ќе го увезете само JavaScript што планирате да го користите. Во примерот подолу, покажуваме како само да го вклучиме нашиот модален JavaScript:

// 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';

На овој начин, не вклучувате JavaScript што немате намера да го користите за компоненти како копчиња, вртелешки и совети за алатки. Ако увезувате паѓачки мени, совети за алатки или поповери, не заборавајте да ја наведете зависноста од Попер во вашата package.jsonдатотека.

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

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

Автоматски префиксер .browserslistrc

Bootstrap зависи од Autoprefixer за автоматско додавање префикси на прелистувачот на одредени CSS својства. Префиксите се диктирани од нашата .browserslistrcдатотека, пронајдена во коренот на репото на Bootstrap. Приспособувањето на оваа листа на прелистувачи и прекомпајлирањето на Sass автоматски ќе отстрани дел од CSS од вашата компајлирана CSS, доколку има префикси на продавач единствени за тој прелистувач или верзија.

Неискористен CSS

Се бара помош со овој дел, ве молиме размислете за отворање на ПР. Благодарам!

Иако немаме претходно изграден пример за користење на PurgeCSS со Bootstrap, има некои корисни написи и прегледи што ги напиша заедницата. Еве неколку опции:

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/

И на крај, оваа статија за CSS трикови за неискористениот CSS покажува како да се користи PurgeCSS и други слични алатки.

Minify и gzip

Секогаш кога е можно, не заборавајте да го компресирате целиот код што им го сервирате на вашите посетители. Ако користите Bootstrap dist-датотеки, обидете се да се придржувате до минифицираните верзии (означени со .min.cssи .min.jsекстензии). Ако градите Bootstrap од изворот со свој сопствен систем за градење, не заборавајте да имплементирате свои минификатори за HTML, CSS и JS.

Датотеки што не се блокираат

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

Ако користите приклучок Lighthouse во Google Chrome, можеби сте се сопнале преку FCP. Метриката First Contentful Paint го мери времето од кога страницата почнува да се вчитува до кога некој дел од содржината на страницата се прикажува на екранот.

Можете да го подобрите FCP со одложување на некритичниот JavaScript или CSS. Што значи тоа? Едноставно, JavaScript или листови со стилови што не треба да бидат присутни на првата слика на вашата страница треба да бидат означени со asyncили deferатрибути.

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

Ако сакате да дознаете повеќе за ова, веќе има многу одлични статии за тоа:

• https://web.dev/render-blocking-resources/
• https://web.dev/defer-non-critical-css/

Секогаш користете HTTPS

Вашата веб-локација треба да биде достапна само преку HTTPS врски во производство. HTTPS ја подобрува безбедноста, приватноста и достапноста на сите страници и не постои такво нешто како нечувствителен веб сообраќај . Чекорите за конфигурирање на вашата веб-локација да се служи исклучиво преку HTTPS во голема мера варираат во зависност од вашата архитектура и давателот на веб-хостинг, и затоа се надвор од опсегот на овие документи.

Сајтовите што се опслужуваат преку HTTPS треба да пристапуваат и до сите листови со стилови, скрипти и други средства преку HTTPS врски. Во спротивно, на корисниците ќе им испраќате мешана активна содржина , што ќе доведе до потенцијални пропусти каде што страницата може да биде компромитирана со менување на зависноста. Ова може да доведе до безбедносни проблеми и предупредувања во прелистувачот прикажани на корисниците. Без разлика дали го добивате Bootstrap од CDN или го сервисирате сами, погрижете се да му пристапите само преку HTTPS конекции.