Bulite

Lean Sass mbubata

Mgbe ị na-eji Sass n'ime ọkpọkọ akụrụngwa gị, gbaa mbọ hụ na ị na-ebuli Bootstrap site na iji naanị @importihe ndị ị chọrọ. Nkwalite kachasị gị nwere ike isi na Layout & Componentsngalaba nke anyị 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";

Ọ bụrụ na ị naghị eji akụrụngwa, kwupụta ya ma ọ bụ hichapụ ya kpamkpam. Dịka ọmụmaatụ, ọ bụrụ na ị naghị eji carousel, wepụ mbubata ahụ iji chekwaa ụfọdụ nha faịlụ na CSS gị achịkọtara. Buru n'uche na enwere ụfọdụ adabere na mbubata Sass nke nwere ike ime ka ọ sie ike ịhapụ faịlụ.

Javascript dabere

JavaScript nke Bootstrap na-agụnye akụkụ ọ bụla na faịlụ dist anyị bụ isi ( bootstrap.jsna bootstrap.min.js), yana ọbụna ndabere anyị bụ isi (Popper) na faịlụ ngwugwu anyị ( bootstrap.bundle.jsna bootstrap.bundle.min.js). Mgbe ị na-ahazi ya site na Sass, jide n'aka na ị ga-ewepụ Javascript metụtara ya.

Dịka ọmụmaatụ, na-eche na ị na-eji ngwugwu Javascript nke gị dị ka Webpack ma ọ bụ Rollup, naanị ị ga-ebubata Javascript ị na-eme atụmatụ iji. N'ihe atụ dị n'okpuru, anyị na-egosi otu esi etinye Javascript modal anyị:

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

N'ụzọ dị otú a, ị gaghị agụnye Javascript ọ bụla ị na-achọghị iji maka ihe ndị dị ka bọtịnụ, carousels, na Tooltips. Ọ bụrụ na ị na-ebubata dropdowns, Tooltips ma ọ bụ popovers, jide n'aka na ị depụta ndabere Popper na package.jsonfaịlụ gị.

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

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

Autoprefixer .browserslistrc

Bootstrap dabere na Autoprefixer iji tinye prefixes ihe nchọgharị na akpaghị aka na ụfọdụ akụrụngwa CSS. Faịlụ anyị na-ekpebi prefixes .browserslistrc, dị na mgbọrọgwụ nke Bootstrap repo. Ịhazi ndepụta ihe nchọgharị a na ịchịkọta Sass ga-ewepụ ụfọdụ CSS na akpaghị aka na CSS gị, ma ọ bụrụ na enwere prefixes ndị na-ere ahịa pụrụ iche na ihe nchọgharị ahụ ma ọ bụ ụdị ahụ.

CSS ejighị ya

Enyemaka achọrọ na ngalaba a, biko tụlee imepe PR. Daalụ!

Ọ bụ ezie na anyị enweghị ihe atụ arụgoro arụgoro maka iji PurgeCSS na Bootstrap, enwere ụfọdụ akụkọ na-enyere aka na ngagharị nke ndị obodo dere. Nke a bụ ụfọdụ nhọrọ:

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

N'ikpeazụ, akụkọ CSS aghụghọ a na CSS na-ejighị ya na- egosi otu esi eji PurgeCSS na ngwaọrụ ndị ọzọ yiri ya.

Mepụta na gzip

Mgbe ọ bụla o kwere mee, jide n'aka na ịpịkọta koodu niile ị na-ejere ndị ọbịa gị ozi. Ọ bụrụ na ị na-eji faịlụ dist Bootstrap, nwaa ịrapara na ụdị nke pere mpe (gosiri .min.cssna .min.jsndọtị ya). Ọ bụrụ na ị na-eji sistemụ arụ ọrụ nke gị na-ewu Bootstrap site na isi mmalite, jide n'aka na ị mejuputa ihe nke gị maka HTML, CSS na JS.

faịlụ anaghị egbochi

Ọ bụ ezie na iwetulata na iji mkpakọ nwere ike ịdị ka nke zuru oke, ime ka faịlụ gị ghara igbochi bụkwa nnukwu nzọụkwụ n'ime ka saịtị gị dị mma yana ngwa ngwa zuru oke.

Ọ bụrụ na ị na-eji ngwa mgbakwunye Lighthouse na Google Chrome, ị nwere ike sụọ ngọngọ maka FCP. Metric Paint Contentful nke Mbụ na-atụ oge site na mgbe ibe ahụ malitere ibunye ruo mgbe egosipụtara akụkụ ọ bụla nke ọdịnaya ibe na ihuenyo.

Ị nwere ike imeziwanye FCP site na ibugharị Javascript na-adịghị mkpa ma ọ bụ CSS. Kedu ihe nke ahụ pụtara? Naanị, Javascript ma ọ bụ ụdị ụdị na-achọghị ịnọ na agba mbụ nke ibe gị kwesịrị ka ejiri asyncma ọ bụ njiri mara ya defer.

Nke a na-eme ka o doo anya na a na-ebugharị ihe ndị na-adịchaghị mkpa mgbe e mesịrị ma ghara igbochi agba mbụ. N'aka nke ọzọ, ihe ndị dị oke mkpa nwere ike ịgụnye dị ka ederede inline ma ọ bụ ụdị.

Ọ bụrụ na ịchọrọ ịmatakwu gbasara nke a, enweelarị ọtụtụ nnukwu akụkọ gbasara ya:

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

Jiri HTTPS mgbe niile

Webụsaịtị gị kwesịrị ịdị naanị maka njikọ HTTPS na mmepụta. HTTPS na-eme ka nchekwa, nzuzo, na ịdị adị nke saịtị niile, ma ọ nweghị ihe dị ka okporo ụzọ weebụ na-enweghị mmetụta . Usoro iji hazie webụsaịtị gị ka a ga-eje ozi naanị na HTTPS dị iche iche dabere na nhazi ụlọ gị na ndị na-eweta webụ, yabụ gafere oke nke akwụkwọ ndị a.

Saịtị na-eje ozi n'elu HTTPS kwesịkwara ịnweta ụdị ụdị, scripts, na akụ ndị ọzọ karịa njikọ HTTPS. Ma ọ bụghị ya, ị ga-eziga ndị ọrụ agwakọta ọdịnaya na-arụ ọrụ , na-eduga na adịghị ike ebe saịtị nwere ike imebi site n'ịgbanwe ndabere. Nke a nwere ike bute nsogbu nchekwa yana ịdọ aka na ntị n'ime ihe nchọgharị egosiri nye ndị ọrụ. Ma ị na-enweta Bootstrap site na CDN ma ọ bụ na-ejere ya ozi n'onwe gị, hụ na ị na-enweta ya naanị site na njikọ HTTPS.