Optimize
Boloka diprotšeke tša gago di sekame, di arabela, le go hlokomelwa gore o kgone go tliša maitemogelo a mabotse kudu le go tsepamiša kgopolo mešomong ye bohlokwa kudu.
Lean Sass e reka ka ntle
Ge o diriša Sass ka gare ga phaephe ya gago ya matlotlo, kgonthiša gore o dira gore Bootstrap e šome gabotse ka @importgo ing fela dikarolo tšeo o di hlokago. Diphetogo tša gago tše dikgolo kudu go bonagala di tla tšwa Layout & Componentskarolong ya rena 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";
Ge e ba o sa diriše karolo, e swaya diphošo goba o e phumole ka mo go feletšego. Go fa mohlala, ge e ba o sa šomiše carousel, tloša import yeo go boloka bogolo bjo itšego bja faele ka go CSS ya gago ye e kgobokeditšwego. Dula o gopola go na le dilo tše dingwe tšeo di ithekgilego ka tšona go ralala le ditšweletšwa tša ka ntle tša Sass tšeo di ka dirago gore go be thata kudu go tlogela faele.
Sekame ka JavaScript
Bootstrap o JavaScript e akaretša karolo e nngwe le e nngwe ka difaeleng tša rena tša mathomo tša dist ( bootstrap.jsle bootstrap.min.js), gaešita le go ithekga ga rena ga mathomo (Popper) ka difaele tša rena tša bundle ( bootstrap.bundle.jsle bootstrap.bundle.min.js). Ge o dutše o tlwaetša ka Sass, kgonthišetša gore o tloša JavaScript yeo e amanago le yona.
Go fa mohlala, ge re tšea gore o šomiša bundler ya gago ya JavaScript go swana le Webpack, Parcel, goba Vite, o be o tla tsenya feela JavaScript yeo o rulaganyago go e šomiša. Mohlaleng wo o lego ka mo tlase, re bontšha kamoo o ka no akaretšago JavaScript ya rena ya modal:
// 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';
Ka tsela ye, ga o akaretše JavaScript efe goba efe yeo o sa ikemišetšago go e šomiša bakeng sa dikarolo tša go swana le dikonope, di-carousel, le ditlhagišo tša didirišwa. Ge e le gore o tsenya ka ntle dithepo, ditlhagišo tša didirišwa goba dipopover, kgonthiša gore o lokeletša go ithekga ga Popper ka package.jsonfaeleng ya gago.
Diromelwantle tša Tlwaelo
Difaele tše di bootstrap/js/distšomišwago thomelontle ya go se fetoge , ka fao ge o nyaka go šomiša ye nngwe ya tšona o swanetše go dira tše di latelago:
import Modal from 'bootstrap/js/dist/modal'
const modal = new Modal(document.getElementById('myModal'))
Sehlongwa sa go itiriša .diphenselelistrc
Bootstrap e ithekgile ka Autoprefixer go oketša ka go iketla dihlongwapele tša sephephediši go dithoto tše itšego tša CSS. Dihlongwapele di laelwa ke .browserslistrcfaele ya rena, yeo e hwetšwago modung wa repo ya Bootstrap. Go beakanya lenaneo le la diphensele le go kgoboketša gape Sass go tla tloša ka go iketla CSS ye nngwe go tšwa go CSS ya gago ye e kgobokeditšwego, ge e le gore go na le dihlongwapele tša morekiši tšeo di kgethegilego go sephephediši seo goba phetolelo.
CSS yeo e sa šomišwego
Thušo e nyakega ka karolo ye, hle nagana ka go bula PR. Ke a leboga!
Le ge re se na mohlala wo o agilwego pele wa go šomiša PurgeCSS ka Bootstrap, go na le dihlogo tše dingwe tše di thušago le go sepela tšeo setšhaba se di ngwadilego. Dikgetho tše dingwe ke tše:
- https://medium.com/dwarves-motheo/tlosa-ditaele-tše-css tšeo di sa šomišwego-go-bootstrap-o diriša-purgecss-88395a2c5772
- https://lukelowrey.com/ka go itiriša-tloša-css-yeo e sa šomišwego-go-bootstrap-goba-diforeime-tše-ngwe/
Labofelo, sehlogo se sa CSS Tricks ka CSS yeo e sa dirišwego se bontšha kamoo o ka dirišago PurgeCSS le didirišwa tše dingwe tše di swanago.
Fokotša le gzip
Nako le nako ge go kgonega, kgonthišetša gore o gatelela khoutu ka moka yeo o e neago baeng ba gago. Ge e ba o diriša difaele tša Bootstrap dist, leka go kgomarela diphetolelo tše di fokoditšwego (tšeo di bontšhitšwego ke .min.cssle .min.jsdikatološo). Ge e ba o aga Bootstrap go tšwa mothopong ka tshepedišo ya gago ya go aga, kgonthišetša gore o phethagatša di-minifier tša gago tša HTML, CSS, le JS.
Difaele tšeo e sego tša go thibela
Le ge go fokotša le go diriša kgatelelo go ka bonagala e le mo go lekanego, go dira gore difaele tša gago e se ke tša thibela gape ke mogato o mogolo wa go dira gore sebaka sa gago se loketšwe gabotse le go ba ka lebelo ka mo go lekanego.
Ge e ba o diriša plugin ya Lighthouse go Google Chrome, o ka ba o ile wa kgopša ke FCP. Metriki ya Pente ya Pele ye e nago le Diteng e ela nako go tloga ge letlakala le thoma go laetša go fihla ge karolo efe goba efe ya diteng tša letlakala e tšweletšwa skrineng.
O ka kaonafatša FCP ka go diegiša JavaScript goba CSS yeo e sego ya bohlokwa. Seo se bolela’ng? Ka bonolo, JavaScript goba matlakala a setaele ao a sa hlokegego go ba gona penteng ya mathomo ya letlakala la gago a swanetše go swaiwa ka asyncgoba deferdika.
Se se netefatša gore methopo yeo e sego bohlokwa kudu e imelwa ka morago gomme e sa thibele pente ya mathomo. Ka lehlakoreng le lengwe, methopo ya bohlokwa e ka akaretšwa bjalo ka dingwalwa tša ka gare ga mothaladi goba ditaele.
Ge e ba o nyaka go ithuta mo go oketšegilego ka se, go šetše go e-na le dihlogo tše dintši tše dibotse ka sona:
Ka mehla diriša HTTPS
Webosaete ya gago e swanetše go hwetšagala fela ka dikgokagano tša HTTPS ka tšweletšong. HTTPS e kaonefatša tšhireletšo, sephiri le go hwetšagala ga mafelo ka moka, gomme ga go na selo seo se bitšwago sephethephethe sa wepe seo se sa hlokomelego . Megato ya go beakanya weposaete ya gago gore e fiwe ka go ikgetha ka HTTPS e fapana kudu go ya ka mohlwaela wa gago le moabi wa go amogela wepe, gomme ka go realo e ka ntle ga sebaka sa ditokomane tše.
Mafelo ao a hlankelwago ka HTTPS le ona a swanetše go fihlelela matlakala ka moka a setaele, dingwalwa, le dithoto tše dingwe ka dikgokagano tša HTTPS. Go sego bjalo, you’ll be sending users mixed active content , go lebiša go kgonagalo ya go hlaselega gabonolo moo sebaka se ka bewago kotsing ka go fetoša go ithekga. Se se ka lebiša go ditaba tša tšhireletšo le ditemošo tša ka gare ga sephephediši tšeo di bontšhwago go badiriši. Go sa šetšwe gore o hwetša Bootstrap go tšwa go CDN goba o e hlankela ka bowena, kgonthiša gore o e fihlelela feela ka dikgokagano tša HTTPS.