Optimiser na ndenge ya malamu

Lean Sass azali kokɔtisa biloko na mboka mopaya

Ntango ozali kosalela Sass na pipeline ya biloko na yo, sala ete o optimiser Bootstrap na ko @importing kaka ba composants oyo osengeli na yango. Ba optimisations na yo ya minene ekouta mbala mosusu na Layout & Componentseteni ya 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";

Soki ozali kosalela composant moko te, commenter yango to bolongola yango mobimba. Ndakisa, soki ozali kosalela carrousel te, longola importation wana mpo na kobomba mwa bonene ya fichier na CSS na yo oyo esangisi. Bozala na makanisi ezali na mwa ba dépendances na kati ya ba importations ya Sass oyo ekoki kosala ete ezala mpasi mingi mpo na kotika fichier.

Ezali na JavaScript

JavaScript ya Bootstrap ezali na composant nionso na ba fichiers dist na biso ya liboso ( bootstrap.jsmpe bootstrap.min.js), mpe ata dépendance na biso ya liboso (Popper) na ba fichiers na biso ya bundle ( bootstrap.bundle.jsmpe bootstrap.bundle.min.js). Tango ozali kosala personnalisation na nzela ya Sass, sala makasi olongola JavaScript oyo etali yango.

Na ndakisa, soki tokanisi ete ozali kosalela bundler na yo moko ya JavaScript lokola Webpack to Rollup, okokɔtisa kaka JavaScript oyo okani kosalela. Na ndakisa oyo ezali awa na nse, tozali kolakisa ndenge ya kokɔtisa kaka JavaScript na biso ya modal:

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

Na ndenge oyo, ozali te kokɔtisa JavaScript moko oyo ozali na mokano ya kosalela te mpo na biloko lokola ba boutons, ba carrousels, mpe ba toli ya bisaleli. Soki ozali ko kotisa ba dropdowns, ba toli ya bisaleli to ba popovers, sala makasi otanga dépendance ya Popper na package.jsonfichier na yo.

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

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

Autoprefixer .ba navigateurslistrc

Bootstrap etali Autoprefixer mpo na kobakisa automatiquement ba préfixes ya navigateur na ba propriétés mosusu ya CSS. Ba préfixes e dicter na .browserslistrcfichier na biso, ezwami na root ya repo ya Bootstrap. Kobongisa liste oyo ya ba navigateurs mpe ko recompiler lisusu Sass ekolongola automatiquement mua CSS na CSS na yo oyo esangisi, soki ezali na ba préfixes ya ba vendeurs oyo ezali unique na navigateur to version wana.

CSS oyo esalelami te

Lisalisi elingi na eteni oyo, tosengi okanisa kofungola PR. Matondi!

Atako tozali na ndakisa oyo etongami liboso te mpo na kosalela PurgeCSS na Bootstrap, ezali na mwa masolo ya lisungi mpe ba walkthroughs oyo lisanga ekomi. Talá mwa makambo oyo okoki kosala:

• https://medium.com/fondation-nains/longola-ba-styles-ya-css-oyo-esalelami-te-na-bootstrap-na-kosalela-purgecss-88395a2c5772
• https://lukelowrey.com/kolongola-automatiquement-css-oyo-esalelami-na-bootstrap-to-ba-cadre-mosusu/

Na nsuka, lisolo oyo ya CSS Tricks oyo elobeli CSS oyo esalelami te ezali komonisa ndenge ya kosalela PurgeCSS mpe bisaleli mosusu ya ndenge wana.

Minifiser mpe gzip

Soki likoki ezali, kobosana te kofinafina code nyonso oyo ozali kopesa bato oyo bayaka kotala yo. Soki ozali kosalela ba fichiers dist ya Bootstrap, meka kokangama na ba versions minifiées (oyo elakisami na ba extensions mpe) .min.css. .min.jsSoki ozali kotonga Bootstrap uta na source na système ya kotonga na yo moko, sala makasi osalela ba minifiers na yo moko mpo na HTML, CSS, mpe JS.

Ba fichiers oyo ezali ko bloquer te

Atako ko minifier mpe kosalela compression ekoki komonana lokola ekoki, kosala ba fichiers na yo oyo ezali ko bloquer te ezali mpe litambe monene mpo na kosala ete site na yo ezala bien optimisé mpe mbangu ekoki.

Soki ozali kosalela plugin ya Lighthouse na Google Chrome, ekoki kozala ete obɛtaki libaku na FCP. Métrique ya Peinture ya liboso oyo ezali na makambo emekaka ntango kobanda ntango lokasa ebandi kozwa tii ntango eteni moko ya makambo ya lokasa emonisami na écran.

Okoki kobongisa FCP na kozongisaka sima JavaScript to CSS oyo ezali na ntina te. Yango elimboli nini? Bobele, JavaScript to ba stylesheets oyo ezali na ntina te ya kozala na langi ya liboso ya lokasa na yo esengeli kozala na bilembo asyncto deferattributs.

Yango esalaka ete biloko oyo ezali na ntina mingi te ezala na charge na nsima mpe ekanga te langi ya liboso. Epayi mosusu, biloko ya ntina ekoki kozala na kati lokola ba scripts to ba styles ya kati.

Soki olingi koyeba makambo mingi na ntina na likambo oyo, ezali déjà na ebele ya masolo ya malamu oyo etali yango:

• https://web.dev/makoki-ya-kopekisa-ba-render/
• https://web.dev/kozongisa sima css-oyo-ya-critique te/

Salelá ntango nyonso HTTPS

Site na yo esengeli kozala kaka na nzela ya ba connexions HTTPS na production. HTTPS ebongisaka bokengi, bomoi ya moto ye moko, mpe bozali ya basite nyonso, mpe ezali na eloko moko te oyo babengaka trafic web oyo ezali na ntina te . Ba étapes ya ko configurer site internet na yo po e servir exclusivement na HTTPS ekeseni mingi selon architecture na yo na fournisseur ya hébergement web, et donc ezali hors de portée ya ba docs oyo.

Ba sites oyo esalemi na nzela ya HTTPS esengeli mpe kozwa ba feuilles de style nionso, ba scripts, mpe biloko mosusu na nzela ya ba connexions HTTPS. Soki te, okozala kotinda basaleli makambo ya mosala ya kosangisa , oyo ekomema na ba vulnérabilités potentielles esika site moko ekoki kozala na likama na kobongola dépendance moko. Yango ekoki komema mikakatano ya bokengi mpe makebisi ya kati ya navigateur oyo elakisami na basaleli. Ezala ozali kozwa Bootstrap na CDN to ozali kosalela yango yo moko, sala ete okɔta na yango kaka na nzela ya ba connexions HTTPS.