Ntlafatsa

Lean Sass e tsoang kantle ho naha

Ha u sebelisa Sass phaepheng ea thepa ea hau, etsa bonnete ba hore u ntlafatsa Bootstrap ka ho sebelisa feela @importlikarolo tseo u li hlokang. Lintlafatso tsa hau tse kholo li kanna tsa tsoa Layout & Componentskarolong ea rona ea 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";

Haeba u sa sebelise karolo e itseng, e fane ka maikutlo kapa u e hlakole ka ho feletseng. Ka mohlala, haeba u sa sebelise carousel, tlosa thepa eo ho boloka boholo ba faele ho CSS ea hau e hlophisitsoeng. Hopola hore ho na le lintho tse ling tse itšetlehileng ka thepa ea Sass e ka etsang hore ho be thata ho siea faele.

Leka JavaScript

JavaScript ea Bootstrap e kenyelletsa karolo e 'ngoe le e' ngoe ho lifaele tsa rona tsa mantlha tsa dist ( bootstrap.jsle bootstrap.min.js), esita le ts'epo ea rona ea mantlha (Popper) ka lifaele tsa rona tsa bongata ( bootstrap.bundle.jsle bootstrap.bundle.min.js). Ha u ntse u itloaetsa ka Sass, etsa bonnete ba hore u tlosa JavaScript e amanang le eona.

Mohlala, ha re nka hore u sebelisa sephutheloana sa JavaScript sa hau joalo ka Webpack kapa Rollup, u ka kenya JavaScript eo u rerang ho e sebelisa. Mohlaleng o ka tlase, re bonts'a mokhoa oa ho kenyelletsa JavaScript ea rona feela:

// 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 ena, ha o kenyelle JavaScript efe kapa efe eo u sa ikemisetsang ho e sebelisa bakeng sa likarolo tse kang likonopo, li-carousels le lisebelisoa tsa lisebelisoa. Haeba u reka li-dropdown, lithulusi kapa li-popover, etsa bonnete ba hore u thathamisa ho itšetleha ka Popper package.jsonfaeleng ea hau.

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

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

Autoprefixer .browserslistrc

Bootstrap e itšetlehile ka Autoprefixer ho kenya li-prefixes tsa sebadi ho thepa e itseng ea CSS. Li-prefixes li laeloa ke .browserslistrcfaele ea rona, e fumanoang motsong oa Bootstrap repo. Ho etsa lethathamo lena la libatli le ho khutlisetsa Sass ho tla tlosa CSS e 'ngoe ho tsoa ho CSS ea hau e hlophisitsoeng, haeba ho na le lihlomathiso tsa barekisi tse ikhethang ho sebatli kapa mofuta oo.

CSS e sa sebelisoeng

Thuso e batloang ka karolo ena, ka kopo nahana ka ho bula PR. Kea leboha!

Le hoja re se na mohlala o hahiloeng esale pele oa ho sebelisa PurgeCSS ka Bootstrap, ho na le lingoliloeng tse thusang le litsela tseo sechaba se li ngotseng. Mona ke tse ling tsa likhetho:

• 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/

Qetellong, sengoloa sena sa CSS Tricks mabapi le CSS e sa sebelisoeng se bonts'a mokhoa oa ho sebelisa PurgeCSS le lisebelisoa tse ling tse tšoanang.

Minify le gzip

Nako le nako ha ho khoneha, etsa bonnete ba hore u hatella khoutu eohle eo u e fang baeti ba hau. Haeba u sebelisa lifaele tsa Bootstrap dist, leka ho khomarela liphetolelo tse fokolang (tse bontšitsoeng ke .min.cssle li- .min.jsextensions). Haeba u ntse u haha ​​​​Bootstrap ho tloha mohloling ka mokhoa oa hau oa ho haha, etsa bonnete ba hore u kenya ts'ebetsong li-minifier tsa hau bakeng sa HTML, CSS, le JS.

Lifaele tse sa thibeleng

Le hoja ho fokotsa le ho sebelisa compression ho ka 'na ha bonahala eka ho lekane, ho etsa hore lifaele tsa hau li se ke tsa thibela hape ke mohato o moholo oa ho etsa hore sebaka sa hau sa marang-rang se ntlafatsoe hantle le ka potlako e lekaneng.

Haeba u sebelisa plugin ea Lighthouse ho Google Chrome, e kanna eaba u ile oa khoptjoa ke FCP. Pente ea Pele e khotsofatsang e lekanya nako ho tloha ha leqephe le qala ho bula ho isa ha karolo efe kapa efe ea litaba tsa leqephe e hlahisoa skrineng.

O ka ntlafatsa FCP ka ho chechisa JavaScript kapa CSS e seng ea bohlokoa. E bolelang? Ka mantsoe a bonolo, JavaScript kapa li-stylesheets tse sa hlokeng hore li be teng penteng ea pele ea leqephe la hau li lokela ho tšoauoa asynckapa deferlitšoaneleho.

Sena se tiisa hore lisebelisoa tse seng bohlokoa haholo li laeloa hamorao mme ha li thibele pente ea pele. Ka lehlakoreng le leng, lisebelisoa tsa bohlokoa li ka kenyelletsoa e le lingoloa tse kahare kapa setaele.

Haeba u batla ho ithuta haholoanyane ka sena, ho se ho na le lingoliloeng tse ngata tse monate ka eona:

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

Kamehla sebelisa HTTPS

Sebaka sa hau sa Marang-rang se lokela ho fumaneha feela ka likhokahano tsa HTTPS tlhahiso. HTTPS e ntlafatsa ts'ireletso, boinotši, le ho fumaneha ha libaka tsohle, 'me ha ho na ntho e kang sephethephethe sa marang-rang se sa tsotelleng . Mehato ea ho lokisa sebaka sa hau sa marang-rang hore se sebeletsoe ka mokhoa o ikhethileng holim'a HTTPS e fapana haholo ho latela boqapi ba hau le mofani oa moamoheli oa webo, ka hona e ka nqane ho boholo ba litokomane tsena.

Liwebsaete tse fanoang ka HTTPS le tsona li tlameha ho fumana maqephe ohle a setaele, lingoloa, le lisebelisoa tse ling holim'a likhokahano tsa HTTPS. Ho seng joalo, u tla be u romella basebelisi litaba tse tsoakaneng tse sebetsang , tse lebisang ho bofokoli bo ka bang teng moo sebaka sa marang-rang se ka senyehang ka ho fetola ho itšetleha. Sena se ka lebisa mathateng a ts'ireletso le litemoso tsa sebatli tse bonts'itsoeng basebelisi. Hore na o fumana Bootstrap ho tsoa ho CDN kapa oa e sebeletsa, etsa bonnete ba hore u e fumana feela ka likhokahano tsa HTTPS.