Optimizirläň

Iň oňat tejribe berip, has möhüm işlere ünsi jemläp bilersiňiz, taslamalaryňyzy arkaýyn, täsirli we dowam etdiriň.

Bu sahypada

Lean Sass import edýär

Sass aktiw turbageçirijiňizde ulananyňyzda, diňe @importzerur komponentleri goşup, Bootstrap-y optimizirläň. Iň uly optimizasiýalar Layout & Components, biziň bölümimizden geler 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";

Bir komponent ulanmaýan bolsaňyz, düşündiriş beriň ýa-da düýbünden pozuň. Mysal üçin, karuseli ulanmaýan bolsaňyz, düzülen CSS-de käbir faýl ululygyny saklamak üçin şol importy aýyryň. Sass importynda bir faýly goýmagy has kynlaşdyryp biljek käbir baglylyklaryň bardygyny ýadyňyzdan çykarmaň.

Arassa JavaScript

“Bootstrap” -yň JavaScript esasy dist faýllarymyzdaky ( bootstrap.jswe bootstrap.min.js), hatda bukja faýllarymyz ( bootstrap.bundle.jswe bootstrap.bundle.min.js) bilen esasy garaşlylygymyz (Popper) -ni öz içine alýar. Sass arkaly sazlaýarkaňyz, baglanyşykly JavaScript-i aýyryň.

Mysal üçin, Webpack, Parcel ýa-da Vite ýaly öz JavaScript bukjany ulanýarsyňyz öýdýän, diňe ulanmagy meýilleşdirýän JavaScript-i import edersiňiz. Aşakdaky mysalda modal JavaScript-i nädip goşmalydygyny görkezýäris:

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

Şeýlelik bilen, düwmeler, karuseller we gurallar ýaly komponentler üçin ulanmak islemeýän JavaScript-i goşmaýarsyňyz. Açylýan ýerleri, gurallar ýa-da açylýan zatlary import edýän bolsaňyz, Popper baglylygyny package.jsonfaýlyňyzda görkeziň.

Bellenen eksport

Adaty eksportybootstrap/js/dist ulanýan faýllar , şonuň üçin birini ulanmak isleseňiz aşakdakylary etmeli:

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

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

Awtofrefikser .browserslistrc

“Bootstrap”, käbir CSS häsiýetlerine brauzer prefikslerini awtomatiki goşmak üçin “Autoprefixer” -e baglydyr. Prefiksler .browserslistrcBootstrap reposynyň kökünde tapylan faýlymyz tarapyndan ýazylýar. Brauzerleriň bu sanawyny düzmek we Sass-y täzeden düzmek, şol brauzer ýa-da wersiýa üçin satyjy prefiksleri bar bolsa, düzülen CSS-den käbir CSS-i awtomatiki usulda aýyrar.

Ulanylmaýan CSS

Bu bölüm bilen islenýän kömek, PR açmagy göz öňünde tutmagyňyzy haýyş edýäris. Sag boluň!

“Bootstrap” bilen “ PurgeCSS ” -ni ulanmak üçin öňünden gurlan mysalymyz ýok bolsa-da, jemgyýetiň ýazan käbir peýdaly makalalary we ädimleri bar. Ine, birnäçe wariant:

Ahyrynda, ulanylmadyk CSS baradaky bu CSS Tricks makalasy PurgeCSS we beýleki şuňa meňzeş gurallary nädip ulanmalydygyny görkezýär.

Minize we gzip

Mümkin boldugyça girýänleriňize hödürleýän ähli koduňyzy gysmagy unutmaň. “Bootstrap dist” faýllaryny ulanýan bolsaňyz, kiçeldilen wersiýalara ýapyşmaga synanyşyň ( giňeltmeler .min.csswe .min.jsgiňeltmeler bilen görkezilýär). “Bootstrap” -y öz gurluş ulgamyňyz bilen gurýan bolsaňyz, HTML, CSS we JS üçin kiçeldijileri ýerine ýetiriň.

Blokirlemeýän faýllar

Gysyşlary kiçeltmek we ulanmak ýeterlik ýaly bolup görünse-de, faýllaryňyzy petiklemeýän ýaly etmek hem sahypaňyzy gowy optimizirlemek we ýeterlik çalt etmek üçin uly ädimdir.

Google Chrome-da “ Lighthouse ” pluginini ulanýan bolsaňyz , FCP-den büdrän bolmagyňyz mümkin. Ilkinji mazmunly boýag ölçegi, sahypa ýüklenip başlanyndan sahypanyň mazmunynyň haýsydyr bir böleginiň ekranda görkezilýän wagtyny ölçýär.

Tankytly däl JavaScript ýa-da CSS yza süýşürip, FCP-ni gowulaşdyryp bilersiňiz. Bu namani anladyar? Plyönekeý sahypaňyzyň birinji boýagynda bolmaly däl JavaScript ýa-da stil tablisalary bilen bellik asyncedilmeli defer.

Bu, az ähmiýetli çeşmeleriň soň ýüklenmegini we ilkinji boýagyň öňüni almazlygy üpjün edýär. Beýleki tarapdan, möhüm çeşmeler içerki ýazgylar ýa-da stil hökmünde girizilip bilner.

Bu hakda has giňişleýin öwrenmek isleseňiz, bu hakda eýýäm köp makalalar bar:

Elmydama HTTPS ulanyň

Web sahypaňyz diňe önümçilikde HTTPS birikmeleri arkaly elýeterli bolmaly. HTTPS ähli sahypalaryň howpsuzlygyny, gizlinligini we elýeterliligini ýokarlandyrýar we duýgur däl web traffigi ýaly zat ýok . Diňe HTTPS-den hyzmat ediljek web sahypaňyzy düzmek ädimleri, arhitekturaňyza we web hosting üpjün edijiňize baglylykda dürli-dürli bolýar we şeýlelik bilen bu resminamalaryň çäginden çykmaýar.

HTTPS-den hyzmat edilýän saýtlar, şeýle hem, HTTPS birikmeleri arkaly ähli stil tablisalaryna, skriptlere we beýleki emläklere girmeli. Otherwiseogsam, ulanyjylara garyşyk işjeň mazmun iberersiňiz, garaşlylygy üýtgetmek bilen bir saýtyň bozulyp biläýjek gowşak ýerlerine sebäp bolarsyňyz. Bu, ulanyjylara görkezilýän howpsuzlyk meselelerine we brauzerdäki duýduryşlara sebäp bolup biler. “Bootstrap” -y CDN-den alýarsyňyzmy ýa-da özüňize hyzmat edýärsiňizmi, diňe HTTPS birikmelerinden girip biljekdigiňize göz ýetiriň.