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.
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";
// 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 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/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 kan hmu a. 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:
- https://medium.com/dwarves-foundation/bootstrap-a hman loh css-styles-te chu paih chhuak rawh purgecss-88395a2c5772
- https://lukelowrey.com/bootstrap- emaw-framework-dang emaw atanga css hman loh chu automatic-in a paih chhuak/
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) 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 nonblocking-a siam hi i site optimized tha leh rang taka siamna atana hmalakna lian tak a ni bawk.
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://web.dev/render-a khap-na-resources/
- https://web.dev/a pawimawh lo-css/ tihkhawtlai theih a ni.
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.