Optimize rawh

I project te chu lean, responsive, leh maintainable taka awm tir la, chutiang chuan experience tha ber i pe thei ang a, hna pawimawh zawkah i rilru i pe thei ang.

He page ah hian

Lean Sass atanga lakluh a ni

I asset pipeline-a Sass i hman hian @importi mamawh components chauh ing-in Bootstrap hi i optimize ngei ngei tur a ni. I optimization lian ber berte Layout & Componentschu kan section atang hian a lo chhuak ngei ang 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";

Component i hman loh chuan comment out la, delete vek rawh. Entirnan, carousel i hman loh chuan chu import chu paih la, i compiled CSS-ah file size engemaw zat save rawh. Sass import zawng zawngah hian file pakhat omit harsa zawka siam thei tur dependency thenkhat a awm tih hre reng ang che.

JavaScript hmang la

Bootstrap-a JavaScript hian kan primary dist file ( bootstrap.jsleh )-a component zawng zawng a huam vek a, kan bundle file ( leh )-a bootstrap.min.jskan primary dependency (Popper) pawh a huam tel bawk. Sass hmanga i customize lai hian a kaihhnawih JavaScript kha paih chhuak ngei ang che.bootstrap.bundle.jsbootstrap.bundle.min.js

Entirnan, Webpack emaw Rollup emaw ang chi JavaScript bundler i hmang ni ta se, i hman tum JavaScript chauh i import ang. A hnuaia entirnan hian kan modal JavaScript te hi kan dah tel mai theih dan tur kan tarlang a:

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

Chutiang chuan, button, carousel, leh tooltip ang chi component hrang hrang atana hman tum loh JavaScript i dah tel lo. Dropdown, tooltips emaw popovers emaw i import a nih chuan i package.jsonfile-ah Popper dependency kha list ngei ang che.

Default Exports tih a ni

Files in bootstrap/js/distuse the default export , chuvangin pakhat hman i duh chuan a hnuaia mi ang hian i tih a ngai a ni:

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

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

A rilru a buai em em a, a rilru a hah em em bawk a. .browserslistrc

Bootstrap hian Autoprefixer ah a innghat a, CSS property thenkhatah browser prefix chu automatic in a dah thei a ni. Prefix te hi kan file hian a dictate a .browserslistrc, Bootstrap repo root ah hmuh a ni. He browser list hi customize a, Sass recompiling hian i compiled CSS atang chuan CSS thenkhat chu automatic in a paih chhuak ang a, chu browser emaw version emaw a vendor prefix danglam bik a awm chuan.

CSS hman loh

He section-ah hian tanpuina duh a nih chuan PR hawn hi ngaihtuah rawh. Ka lawm e!

Bootstrap hmanga PurgeCSS hman dan tur prebuilt example kan neih loh laiin , khawtlang tana thuziak leh walkthrough \angkai tak tak a awm a. Hetah hian duhthlan tur thenkhat tarlan a ni:

A tawp berah chuan he CSS hman loh chungchanga CSS Tricks article hian PurgeCSS leh a ang chi hmanrua dang hman dan a tarlang a.

Minify leh gzip

A theih phawt chuan i tlawhtute hnena i rawn thawn code zawng zawng chu compress vek rawh. .min.cssBootstrap dist files i hman chuan minified versions (the and .min.jsextensions hmanga tarlan) te kha stick tum ang che . Bootstrap hi source atanga i build system hmanga i siam a nih chuan HTML, CSS, leh JS te tan i minifier te kha implement ngei ngei ang che.

File block loh te

Compression minify leh hman hi a tawk ang tih a rinawm laiin, i file-te chu non-blocking-a siam chu i site ṭha taka siam ṭhat leh rang taka siamna kawngah pawh hmalakna lian tak a ni.

Google Chrome-a Lighthouse plugin i hman chuan FCP-ah i tlu tawh mai thei. First Contentful Paint metric hian page load tan atanga page chhunga thu awm thenkhat screen-a render a nih hun chhung a teh a ni.

FCP hi non-critical JavaScript emaw CSS emaw defer hmangin i siam \ha thei ang. Chu chu eng nge a awmzia? A awlsam zawngin, i page paint hmasa bera awm ngai lo JavaScript emaw stylesheet emaw chu asyncor deferattribute hmanga mark tur a ni.

Hei hian resource pawimawh lo zawkte chu a hnuah load a nih theih nan leh paint hmasa ber a block loh nan a pui a ni. A lehlamah chuan critical resources chu inline script emaw style emaw angin a tel thei bawk.

Hemi chungchang hi hriat belh i duh chuan a chungchang thu ropui tak tak a awm tawh a:

HTTPS hmang fo ang che

I website chu HTTPS connection hmangin production-ah chauh hman theih tur a ni. HTTPS hian site zawng zawng security, privacy, leh availability a ti tha a, non-sensitive web traffic tih pawh a awm lo . I website chu HTTPS hmanga service bik tura configure dan tur step te chu i architecture leh web hosting provider a zirin a inang lo hle a, chuvangin heng docs te hian a huam chin a huam lo.

HTTPS hmanga rawngbawlna site te pawhin HTTPS connection hmangin stylesheet, script leh asset dang zawng zawng an access vek tur a ni. Chutiang a nih loh chuan, users-te hnenah mixed active content i thawn dawn a , chu chuan site pakhat chu dependency tihdanglam avanga tihchhiat theihna tur vulnerabilities awm thei a thlen ang. Hei hian security chungchangah harsatna a thlen thei a, in-browser warning a awm thei bawk. CDN atanga Bootstrap i dawng emaw, nangmah ngeiin i service emaw pawh nise, HTTPS connection hmangin chauh i access ngei ngei tur a ni.