manatsara

Manafatra Lean Sass

Rehefa mampiasa Sass ao amin'ny fantson'ny fanananao ianao, dia ataovy azo antoka fa manatsara ny Bootstrap ianao amin'ny alàlan'ny fampidirana @importireo singa ilainao ihany. Ny fanatsarana lehibe indrindra ataonao dia azo inoana fa avy amin'ny Layout & Componentsfizarana ny 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";

Raha tsy mampiasa singa iray ianao dia asio fanehoan-kevitra na vonoy tanteraka. Ohatra, raha tsy mampiasa carousel ianao dia esory io fanafarana io mba hitahiry ny haben'ny rakitra ao amin'ny CSS natambatrao. Ataovy ao an-tsaina fa misy fiankinan-doha amin'ny fanafarana Sass izay mety hanasarotra kokoa ny fanesorana rakitra.

Lean JavaScript

Ny JavaScript's Bootstrap dia ahitana ny singa rehetra ao amin'ny rakitra dist voalohany ( bootstrap.jssy bootstrap.min.js), ary na dia ny fiankinantsika voalohany (Popper) miaraka amin'ny rakitra bundle ( bootstrap.bundle.jssy bootstrap.bundle.min.js). Raha manamboatra amin'ny alàlan'ny Sass ianao dia ataovy izay hanesorana JavaScript mifandraika amin'izany.

Ohatra, raha mihevitra ianao fa mampiasa ny JavaScript-nao manokana toy ny Webpack na Rollup, dia ny JavaScript nokasainao hampiasaina ihany no ampidirinao. Amin'ity ohatra etsy ambany ity dia asehontsika ny fomba hampidirana ny JavaScript modaly:

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

Amin'izany fomba izany dia tsy hampidirinao JavaScript izay tsy tianao hampiasaina amin'ny singa toy ny bokotra, carousels, ary toro-hevitra. Raha manafatra dropdowns, tooltips na popovers ianao dia ataovy lisitra ny fiankinan'ny Popper ao amin'ny rakitrao package.json.

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

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

Autoprefixer .browserslistrc

Miankina amin'ny Autoprefixer ny Bootstrap mba hampidirana tovan'ny navigateur ho azy amin'ny fananana CSS sasany. Ny prefixes dia baikon'ny .browserslistrcrakitra, hita ao amin'ny fototry ny repo Bootstrap. Ny fanasokajiana an'ity lisitry ny mpitety tranonkala ity sy ny famerenana indray ny Sass dia hanaisotra ho azy ny CSS sasany amin'ny CSS natambatrao, raha misy tovan'ny mpivarotra manokana amin'io navigateur na dikan-teny io.

CSS tsy ampiasaina

Fanampiana tadiavina amin'ity fizarana ity, azafady mba diniho ny hanokatra PR. Misaotra!

Na dia tsy manana ohatra efa voaomana aza izahay amin'ny fampiasana PurgeCSS miaraka amin'ny Bootstrap, dia misy lahatsoratra mahasoa sy fitsangatsanganana nosoratan'ny vondrom-piarahamonina. Ireto misy safidy vitsivitsy:

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

Farany, ity lahatsoratra CSS Tricks momba ny CSS tsy ampiasaina ity dia mampiseho ny fomba fampiasana PurgeCSS sy fitaovana hafa mitovy amin'izany.

Minify ary gzip

Isaky ny azo atao, ataovy azo antoka fa manindry ny code rehetra atolotrao amin'ny mpitsidika anao. Raha mampiasa rakitra Bootstrap dist ianao dia miezaha mifikitra amin'ny dikan-teny nohavaozina (voatondro amin'ny .min.csssy ny .min.jsfanitarana). Raha manangana Bootstrap avy amin'ny loharano miaraka amin'ny rafitra fananganana anao manokana ianao, dia ataovy izay hampiharana ny minifiers anao manokana ho an'ny HTML, CSS ary JS.

rakitra tsy manakana

Na dia toa ampy aza ny fampihenana sy ny fampiasana ny famandrihan-toerana, dia dingana lehibe iray ihany koa ny fanaovana ny rakitrao tsy manakana ny tranokalanao ho tsara sy haingana.

Raha mampiasa plugin Lighthouse ao amin'ny Google Chrome ianao dia mety ho tafintohina tamin'ny FCP. Ny mari-pandrefesana Loko Loko Voalohany dia mandrefy ny fotoana nanombohan'ny fampidirana ny pejy ka hatramin'ny nanehoana ny ampahany amin'ny votoatin'ny pejy eo amin'ny efijery.

Azonao atao ny manatsara ny FCP amin'ny alàlan'ny fanemorana JavaScript na CSS tsy mitsikera. Inona ny dikan'izany? Raha tsorina, JavaScript na stylesheets izay tsy mila misy eo amin'ny loko voalohany amin'ny pejinao dia tokony asiana marika asyncna defertoetra.

Izany dia miantoka fa ny loharanon-karena tsy dia manan-danja dia entina any aoriana ary tsy manakana ny loko voalohany. Amin'ny lafiny iray, ny loharano manan-danja dia azo ampidirina ho toy ny script na styles inline.

Raha te-hahafantatra bebe kokoa momba an'io ianao dia efa misy lahatsoratra tsara be momba izany:

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

Mampiasà HTTPS foana

Ny tranokalanao dia tokony ho hita amin'ny fifandraisana HTTPS amin'ny famokarana. Manatsara ny fiarovana, ny fiainana manokana ary ny fisian'ny tranokala rehetra ny HTTPS, ary tsy misy ny fifamoivoizana amin'ny Internet tsy saro-pady . Ny dingana handrindrana ny tranokalanao mba hatolotra manokana amin'ny HTTPS dia miovaova arakaraka ny maritranonao sy ny mpamatsy fampiantranoana tranonkala, ary noho izany dia mihoatra ny sahan'ireo doka ireo.

Ny tranokala atolotra amin'ny HTTPS dia tokony hiditra amin'ny takelaka rehetra, script ary fananana hafa amin'ny fifandraisana HTTPS. Raha tsy izany dia handefa votoaty mavitrika mifangaro amin'ny mpampiasa ianao , mitarika ho amin'ny mety ho vulnerabilité izay mety hidiran'ny tranokala iray amin'ny alàlan'ny fanovana ny fiankinan-doha. Mety hitarika olana amin'ny fiarovana sy fampitandremana ao anaty navigateur aseho amin'ny mpampiasa izany. Na mahazo Bootstrap avy amin'ny CDN ianao na manompo azy manokana dia ataovy izay hahazoanao azy amin'ny fifandraisana HTTPS ihany.