Oñemohenda porãve haguã

Lean Sass importaciones rehegua

Eipurúvo Sass nde pipeline de activo-pe, eñangareko emohenda porãve hag̃ua Bootstrap @importing umi componente reikotevẽva añoite. Umi ne optimización tuichavéva oiméne oúta Layout & Componentsore sección-gui 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";

Ndereiporúiramo peteĩ componente, ecomenta térã emboguepaite. Techapyrã, ndereiporúiramo carrusel, eipe’a upe importación eñongatu hag̃ua michĩmi vore tuichakue nde CSS oñembohekopyrévape. Eñongatu ne akãme oĩha peteĩ dependencia Sass importación rupive ikatúva hasyve ojeheja rei hag̃ua peteĩ vore.

Ojepyso JavaScript rehe

Bootstrap JavaScript oike opaite componente ñande archivo dist primario-pe ( bootstrap.jsha bootstrap.min.js), ha jepe ñande dependencia primaria (Popper) ñande archivo paquete ( bootstrap.bundle.jsha bootstrap.bundle.min.js) ndive. Emohenda aja Sass rupive, eñangareko eipe’a hag̃ua JavaScript ojoajúva.

Techapyrã, ñaimo’ãramo reipuruha nde JavaScript mboajepyréva Webpack térã Rollup-icha, reguerúta JavaScript reiporuséva añoite. Pe techapyrã oĩva iguýpe, rohechauka mba’éichapa ikatu ñamoĩnte ñande JavaScript 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/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';

Péicha, neremoĩri mba’eveichagua JavaScript nereñeha’ãiva reipuru umi componente-pe g̃uarã ha’eháicha botón, carrusel ha tembipuru’i ñe’ẽmondo. Eguerúramo umi desplegable, tembipuru’i ñe’ẽmondo térã popover, eñangareko emoĩ hag̃ua Popper dependencia nde package.jsonrembiapokue ryepýpe.

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

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

Ñepyrũrã ijeheguigua .browserslistrc

Bootstrap odepende Autoprefixer rehe omoĩ hag̃ua ijeheguiete kundahára ñepyrũrã peteĩ CSS mbaꞌekuaarãme. Umi ñe’ẽpehẽtai ojedicta ñande .browserslistrcvore rupive, ojejuhúva Bootstrap repo rapópe. Emohenda ko kundahára lista ha embojoaju jey Sass oipe’áta ijeheguiete peteĩ CSS nde CSS oñembohekopyrévagui, oĩramo ñemuha ñepyrũrã peteĩchagua upe kundahára térã versión-pe g̃uarã.

CSS ndojeporúiva

Pytyvõ ojeipotáva ko sección rehe, por favor, econsidera oipe'a haguã peteî PR. Aguyjevete!

Ndoroguerekóiramo jepe peteĩ techapyrã ojejapo mboyve ojepuru hag̃ua PurgeCSS Bootstrap ndive, oĩ peteĩ artíkulo ha jeguata oipytyvõva komunida ohaiva’ekue. Koʼápe oĩ unos kuánto opsión:

• https://medium.com/fundamento-enanos/oipe’a-estilos-css-ndojeporúiva-bootstrap-gui-gui-purgecss-88395a2c5772
• https://lukelowrey.com/oipe’a ijeheguiete-css-ojeporúiva-bootstrap-térã-ambue-framework-gui/

Ipahápe, ko CSS Tricks artíkulo CSS ndojeporúiva rehegua ohechauka mbaꞌeichaitépa ojepuruvaꞌerã PurgeCSS ha ambue tembipuru ojoguáva.

Omboguejy ha gzip

Ikatu jave, katuete ecomprimi opaite código reservíva ne visitante-kuérape. Oipurúramo Bootstrap dist rembiapokue, eñeha’ã ejepytaso umi versión oñemboguejýva rehe (ojehechaukáva umi .min.cssha .min.jsextensión rupive). Emopu’ãramo Bootstrap ypykue guive nde sistema ñemopu’ãrã reheve, eñangareko emoañetévo ne mba’e’oka michĩvéva HTML, CSS ha JS-pe g̃uarã.

Umi archivo ndojejokóiva

Pe ñemboguejy ha jepuru compresión ikatu ha’ete suficiente ramo jepe, ejapo ne rembiapokue ndojokóiva ha’e avei peteĩ tembiapo tuicháva ejapo hag̃ua ne tenda oñemboheko porã ha pya’e porã hag̃ua.

Oipurúramo peteĩ Lighthouse plugin Google Chrome-pe, ikatu reñepysanga FCP rehe. Pe métrica Primera Pintura Contenida rehegua omedi aravo oñepyrũ guive ojekarga pe páhina oñembohasa jave pantalla-pe oimeraẽva pehẽngue pe páhina contenido rehegua.

Ikatu emoporãve FCP embotapykuévo JavaScript térã CSS ndaha’éiva crítico. Mbaʼépa heʼise upéva? Simplemente, JavaScript térã hoja de estilo natekotevẽiva oĩ presente peteĩha pintura nde página-pe oñemarkava’erã asynctérã deferatributo reheve.

Péicha oasegura umi recurso menos importante ojekarga upe rire ha ani omboty pintura peteîha. Ambue hendáicha, umi recurso crítico ikatu oñemoinge script térã estilo en línea ramo.

Reikuaasevéramo ko mba’ére, oĩma heta artíkulo iporãitereíva hesegua:

• https://web.dev/render-mboty-recurso-kuéra/
• https://web.dev/deferir-css-no-crítico- rehegua/

Akóinte eipuru HTTPS

Nde página web ojeguerekova’erã HTTPS joaju rupive añoite producción-pe. HTTPS omoporãve opaite ñanduti renda ñeñangareko, ñemigua ha jeguereko, ha ndaipóri mba’e ojeheróva tráfico web ndaha’éiva sensitivo . Umi tembiaporã emohenda hag̃ua ne ñanduti renda oñeservi hag̃ua HTTPS rupive añoite iñambue tuicha odependévo ne arquitectura ha web hosting proveedor rehe, ha upéicha rupi ohasa ko’ã docs rembiapokue.

Umi tenda oñembohasáva HTTPS rupive oikeva’erã avei opaite kuatia estilo rehegua, script ha ambue mba’ekuaarãme HTTPS joaju rupive. Nda’upéichairamo, remondova’erã puruhárape contenido activo oñembojehe’áva , ogueraháva potencial vulnerabilidad-pe peteĩ tenda ikatuhápe oñembyai oñemoambuévo peteĩ dependencia. Kóva ikatu ogueru mba’e’oka seguridad rehegua ha ñe’ẽñemi kundahára ryepýpe ojehechaukáva puruhárape. Taha’e rehupyty Bootstrap peteĩ CDN-gui térã reservívo ndete voi, eñangareko eike hag̃ua hese HTTPS joaju rupive añoite.