Оптимизация

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

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

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/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 кайбер 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 кулланыгыз

Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and there is no such thing as non-sensitive web traffic. The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs.

Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you’ll be sending users mixed active content, leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you’re getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections.