Оптимизация

Саксыз Сасс импорт

Сезнең актив торбагызда 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";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

Әгәр дә сез компонент кулланмыйсыз икән, аңа аңлатма бирегез яки бөтенләй бетерегез. Әйтик, сез карусель кулланмыйсыз икән, тупланган CSS-та файл күләмен саклап калу өчен, импортны алып ташлагыз. Онытмагыз, Sass импортында кайбер бәйләнешләр бар, алар файлны калдыруны кыенлаштырырга мөмкин.

Сакчыл JavaScript

Bootstrap'ның JavaScript безнең төп дист файллардагы ( bootstrap.jsһәм ), һәм хәтта безнең төп файлларыбыз ( һәм bootstrap.min.js) белән төп бәйләнешебез (Поппер) үз эченә ала . Sass аша көйләгәндә, JavaScript белән бәйләнешне бетерегез.bootstrap.bundle.jsbootstrap.bundle.min.js

Мәсәлән, сез үзегезнең 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/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 кайбер CSS үзлекләренә браузер префиксларын автоматик рәвештә өстәү өчен Autoprefixer'ка бәйле. Префикслар .browserslistrcBootstrap репо тамырында табылган файл белән язылган. Бу браузерлар исемлеген көйләү һәм Sass-ны кабатлау, сезнең CSS-тан кайбер CSS-ны автоматик рәвештә бетерәчәк, әгәр шул браузер яки версиягә хас сатучы префикслары булса.

Кулланылмаган CSS

Бу бүлек белән кирәкле ярдәм, PR ачу турында уйлагыз. Рәхмәт!

Bootstrap белән PurgeCSS куллану өчен бездә алдан төзелгән мисал булмаса да, җәмгыять язган кайбер файдалы мәкаләләр һәм алга китешләр бар. Менә берничә вариант:

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

Ниһаять, кулланылмаган CSS турындагы бу CSS хәйләләр мәкаләсе PurgeCSS һәм башка шундый коралларны ничек кулланырга икәнен күрсәтә.

Minize һәм gzip

Мөмкин булганда, килүчеләргә хезмәт иткән барлык кодны кысып куегыз. Әгәр сез Bootstrap дист файлларын кулланасыз икән, минималь версияләргә ябышырга тырышыгыз ( киңәйтүләр .min.cssһәм .min.jsкиңәйтүләр белән күрсәтелә). Әгәр сез үзегезнең төзү системасы белән чыганактан Bootstrap төзисез икән, HTML, CSS, JS өчен минификаторларыгызны тормышка ашырыгыз.

Файлларны блоклау

Кысылуны киметү һәм куллану җитәрлек кебек тоелса да, файлларыгызны блокировкасыз итү шулай ук ​​сайтыгызны оптимальләштерү һәм җитәрлек тиз ясау өчен зур адым.

Әгәр дә сез Google Chrome'да " Маяк " плагинын кулланасыз икән , сез FCP өстендә абынгансыз. Беренче эчтәлекле буяу метрикасы бит йөкләнә башлаган вакыттан алып битнең эчтәлегенең теләсә нинди өлеше экранда күрсәтелгән вакытны үлчәя.

Сез критик булмаган JavaScript яки CSS кичектереп FCPны яхшырта аласыз. Нинди мәгънәгә килә? Гади генә итеп, JavaScript яки стиль таблицалары сезнең битнең беренче буягында булырга тиеш түгел, asyncяки deferатрибутлар белән билгеләнергә тиеш.

Бу мөһим булмаган ресурсларның соңрак йөкләнүен һәм беренче буяуны блокламавын тәэмин итә. Икенче яктан, критик ресурслар сценарий яки стиль рәвешендә кертелергә мөмкин.

Бу турыда күбрәк беләсегез килсә, бу турыда бик күп мәкаләләр бар:

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

Waysәрвакыт HTTPS кулланыгыз

Сезнең вебсайт производствода HTTPS тоташулары аша гына булырга тиеш. HTTPS барлык сайтларның куркынычсызлыгын, хосусыйлыгын, мөмкинлеген яхшырта, һәм сизгер булмаган веб-трафик дигән нәрсә юк . Вебсайтыгызны HTTPS аша гына хезмәт итәр өчен конфигурацияләү адымнары сезнең архитектурага һәм веб-хостинг провайдерына карап төрлечә үзгәрә, һәм шулай итеп бу документлар чикләреннән чыга.

HTTPS аша хезмәт күрсәткән сайтлар шулай ук ​​барлык стиль таблицаларына, сценарийларга һәм HTTPS тоташулары аша бүтән активларга керергә тиеш. Otherwiseгыйсә, сез кулланучыларга катнаш актив эчтәлек җибәрерсез, потенциаль зәгыйфьлеккә китерәчәк, анда сайт бәйләнешне үзгәртеп бозылырга мөмкин. Бу куркынычсызлык проблемаларына һәм кулланучыларга күрсәтелгән браузердагы кисәтүгә китерергә мөмкин. Сез CDN-тан Bootstrap аласызмы яки үзегезгә хезмәт итәсезме, аңа HTTPS тоташулары аша гына керүегезне тикшерегез.