ምምሕያሽ ምግባር

ፕሮጀክትታትካ ጽሩያት፡ ምላሽ ዝህቡን ዝዕቀቡን ግበሮም ምእንቲ ዝበለጸ ተመክሮ ከተቕርብን ኣብ ዝያዳ ኣገደስቲ ስራሓት ከተተኩርን ትኽእል።

ኣብዚ ገጽ

ጽሩይ ሳስ ካብ ወጻኢ ዝኣቱ

@importኣብ ሻምብቆ ንብረትካ Sass ክትጥቀመሉ ከለኻ፡ ዘድልየካ ኣካላት ጥራይ ብምእታው Bootstrap optimize ከም ዝገበርካዮ ኣረጋግጽ ። Layout & Componentsእቲ ዝዓበየ ምምሕያሻትካ ካብቲ ናይ ናትና ክፍሊ ክመጽእ ተኽእሎ ኣሎ 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";

ሓደ ኣካል ዘይትጥቀም እንተኾንካ ርእይቶ ሃቦ ወይ ምሉእ ብምሉእ ደምስሶ። ንኣብነት፡ ነቲ ካሮሰል ዘይትጥቀመሉ እንተኾንካ፡ ኣብቲ ዝተጠርነፈ CSS ገለ ዓቐን ፋይል ንምዕቃብ፡ ነቲ ምእታው ኣውጽኣዮ። ኣብ መላእ ኣእትዎት ሳስ ገለ ጽግዕተኛታት ኣለዉ ንሓደ ፋይል ንምግዳፍ ዝያዳ ከጸግሙ ዝኽእሉ ኣብ ግምት ኣእትዉ።

ጃቫስክሪፕት ምጽጋዕ

ናይ Bootstrap ጃቫስክሪፕት ንነፍሲ ወከፍ ኣካል ኣብ ቀንዲ dist ፋይላትና ( bootstrap.jsand bootstrap.min.js) የጠቓልል፣ ዋላ ውን ቀንዲ ጽግዕተኛነትና (Popper) ምስ bundle ፋይላትና ( bootstrap.bundle.jsand bootstrap.bundle.min.js) የጠቓልል። ብመንገዲ ሳስ ክትቅይር ከለኻ፡ ተዛመድቲ ጃቫስክሪፕት ምእላይካ ኣረጋግጽ።

ንኣብነት፡ ከም Webpack ወይ Rollup ዝኣመሰለ ናይ ገዛእ ርእስኻ ጃቫስክሪፕት ቡንደር ትጥቀም ኣለኻ ኢልና እንተወሰድናዮ፡ ነቲ ክትጥቀመሉ ዝሓሰብካዮ ጃቫስክሪፕት ጥራይ ኢኻ ኣእትኻዮ። ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ ከመይ ጌርና ሞዳል ጃቫስክሪፕትና ጥራይ ከም እንሕውስ ነርኢ፤

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

በዚ መንገዲ እዚ፡ ንኸም መጠወቒታት፡ ካሮሰልታትን ምኽርታት መሳርሒታትን ዝኣመሰሉ ኣካላት ክትጥቀመሉ ዘይሓሰብካዮ ዝኾነ ጃቫስክሪፕት ኣይትሕውስን ኢኻ። ንቑልቁል ዝወርድ፡ መሳርሒታት ወይ ፖፖቨርስ እተእቱ እንተ ዄንካ፡ ጽግዕተኛነት ፖፐር ኣብ package.jsonፋይልካ ምዝርዛርካ ኣረጋግጽ።

ነባሪ ሰደድ

Files in bootstrap/js/distuse the default export , ስለዚ ሓደ ካብኣቶም ክትጥቀም እንተደሊኻ ነዞም ዝስዕቡ ክትገብር ኣለካ፤

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

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

ኣውቶፕሪፊክሰር .browserslistrc

ቡትስትራፕ ኣብ Autoprefixer ይምርኮስ ንኣውቶማቲክ ቅድመ-ጥብቆታት መርበብ ሓበሬታ ኣብ ዝተወሰኑ CSS ባህርያት ንምውሳኽ። ቅድመ-ጥብቆታት ብፋይልና ይእዘዙ .browserslistrc፣ ኣብ ሱር ናይ Bootstrap repo ይርከብ። ነዚ ዝርዝር ናይ ዳህሰስቲ ምምዕርራይን ንሳስ ዳግማይ ምጥርናፍን ገለ CSS ካብቲ ዝተጠርነፈ CSS ብኣውቶማቲክ ከወግዶ እዩ፣ ንእቲ መርበብ ሓበሬታ ወይ ስሪት ፍሉያት ዝኾኑ ናይ ሸየጥቲ ቅድመ-ጥብቆታት እንተሃልዮም።

ኣብ ጥቕሚ ዘይውዕል CSS

ሓገዝ ኣብዚ ክፍሊ ይድለ፣ በጃኹም PR ምኽፋት ኣብ ግምት ኣእትዉ። የቅንየለይ!

ን PurgeCSS ምስ Bootstrap ንምጥቃም ኣቐዲሙ ዝተሃንጸ ኣብነት እኳ እንተዘይብልና ፡ እቲ ማሕበረሰብ ዝጸሓፎም ገለ ሓገዝቲ ጽሑፋትን መስመራትን ኣለዉ። ገለ ኣማራጺታት እነሆ፤

ኣብ መወዳእታ፡ እዚ ኣብ ዘይተጠቕመሉ CSS ዝምልከት ጽሑፍ CSS Tricks ፡ PurgeCSSን ካልኦት ተመሳሰልቲ መሳርሒታትን ብኸመይ ከም እንጥቀም ዘርኢ እዩ።

Minifyን gzipን ምግባር

ብዝተኻእለ መጠን ንኹሉ እቲ ንበጻሕትኻ እተገልግሎ ኮድ ምጽቃጥካ ኣረጋግጽ። Bootstrap dist ፋይላት ትጥቀም እንተኾንካ፡ ኣብቲ ዝተቐነሰ ስሪት (ብthe .min.cssand .min.jsextensions ዝተመልከተ) ክትጣበቕ ፈትን። Bootstrap ካብ ምንጪ ብናይ ገዛእ ርእስኻ build system ትሃንጽ እንተኾንካ፡ ናይ ገዛእ ርእስኻ minifiers ንHTML, CSS, JS ምትግባርካ ኣረጋግጽ።

ዘይዕግቱ ፋይላት

ምጉዳልን ምጽቃጥ ምጥቃምን እኹል ክመስል ይኽእል እኳ እንተኾነ፡ ፋይላትካ ዘይዓግቱ ምግባር እውን ንመርበብ ሓበሬታኻ ብጽቡቕ ምምሕያሽን እኹል ቅልጡፍን ንምግባር ዓቢ ስጉምቲ እዩ።

ኣብ Google Chrome Lighthouse plugin ትጥቀሙ እንተኾይንኩም፡ ብ FCP ተዓንቂፍኩም ትኾኑ። እቲ ቀዳማይ ትሕዝቶ ዘለዎ ቀለም መለክዒ ካብቲ ገጽ ምጽዓን ዝጅምረሉ ክሳብ ዝኾነ ክፋል ትሕዝቶ ናይቲ ገጽ ኣብ ስክሪን ዝቐርብ ግዜ ይዕቅን።

ንዘይወሳኒ ጃቫስክሪፕት ወይ ሲኤስኤስ ብምድንጓይ FCP ከተመሓይሽ ትኽእል ኢኻ። እንታይ ማለት እዩ፧ ብቐሊሉ፡ ኣብ ቀዳማይ ቀለም ገጽካ ምህላው ዘየድልዮም ጃቫስክሪፕት ወይ ቅዲ ጽሑፍ ብ asyncወይ deferባህርያት ምልክት ክግበረሎም ኣለዎ።

እዚ ድማ እቶም ኣገደስቲ ዘይኮኑ ጸጋታት ድሒሮም ከም ዝጽዓኑን ነቲ ቀዳማይ ቀለም ከም ዘይዓግቱን የረጋግጽ። ብኻልእ ወገን ድማ ወሳኒ ጸጋታት ከም ውሽጢ መስመር ስክሪፕት ወይ ቅዲታት ክካተቱ ይኽእሉ።

ብዛዕባ እዚ ዝያዳ ክትፈልጡ ምስ እትደልዩ፡ ድሮ ብዙሓት ዓበይቲ ጽሑፋት ብዛዕባኡ ኣለዉ፤

ኩሉ ግዜ HTTPS ተጠቐም

ናትካ መርበብ ሓበሬታ ኣብ ምፍራይ ብመንገዲ HTTPS ምትእስሳራት ጥራይ ክኸውን ኣለዎ። HTTPS ንውሕስነትን ብሕትውናን ተረባሕነትን ኩሎም መርበባት ሓበሬታ የመሓይሽ፣ ዘይተሃዋሲ ትራፊክ መርበብ ሓበሬታ ዝበሃል የለን ። መርበብ ሓበሬታኻ ብኤችቲቲፒኤስ ጥራይ ንኽግልገል ንምውቃር ዝሕግዙ ስጉምትታት ከከም ስነ ህንጻኻን ኣቕራቢ መርበብ ሓበሬታኻን ኣዝዮም ይፈላለዩ እዮም፣ በዚ ኸኣ ካብ ስፍሓት ናይዞም ዶክስ ወጻኢ እዮም።

ብኤችቲቲፒኤስ ዝግልገሉ መርበባት ሓበሬታ እውን ንኹሉ ቅዲ ጽሑፍ፣ ስክሪፕትን ካልእ ንብረትን ብኤችቲቲፒኤስ ምትእስሳር ክረኽብዎ ይግባእ። እንተዘይኮይኑ፡ ንተጠቀምቲ ዝተሓዋወሰ ንጡፍ ትሕዝቶ ክትሰድድ ኢኻ ። እዚ ድማ ናይ ጸጥታ ጸገማትን ኣብ ውሽጢ መርበብ ሓበሬታ ንተጠቀምቲ ዝቐርብ መጠንቀቕታታትን ከስዕብ ይኽእል። ቡትስትራፕ ካብ ሲዲኤን ትረክብ ትኹን ወይ ባዕልኻ ተገልግሎ እንተኾንካ፡ ብኤችቲቲፒኤስ ምትእስሳር ጥራይ ከም እትረኽቦ ኣረጋግጽ።