باشترکردن

هاوردەکردنی لین ساس

لە کاتی بەکارهێنانی Sass لە بۆری سەروەت و سامانەکەتدا، دڵنیابە کە Bootstrap باشتر دەکەیت بە تەنها @importوەرگرتنی ئەو پێکهاتانەی کە پێویستت پێیانە. گەورەترین باشترکردنەکانت بە ئەگەرێکی زۆرەوە لە 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";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

ئەگەر پێکهاتەیەک بەکارناهێنیت، کۆمێنت بکە یان بە تەواوی بیسڕەوە. بۆ نموونە ئەگەر کارۆسێلەکە بەکارناهێنیت، ئەو هاوردەکردنە لابەرە بۆ ئەوەی هەندێک قەبارەی پەڕگە لە CSS ی کۆکراوەتدا هەڵبگریت. لەبیرت بێت هەندێک وابەستەیی لە سەرانسەری هاوردەکردنی ساسدا هەیە کە ڕەنگە نەهێشتنی پەڕگەیەک قورستر بکات.

جاڤاسکڕێپت بەکاربهێنە

جاڤاسکڕێپتی بووتستراپ هەموو پێکهاتەیەک لە فایلە سەرەکییەکانی dist ی ئێمەدا لەخۆدەگرێت ( bootstrap.jsو bootstrap.min.js)، و تەنانەت وابەستەیی سەرەکیمان (Popper) لەگەڵ فایلە باندڵەکانمان ( bootstrap.bundle.jsو bootstrap.bundle.min.js). لە کاتێکدا کە تۆ لە ڕێگەی Sass خۆکارانە دەکەیت، دڵنیابە کە جاڤاسکڕێپتی پەیوەندیدار لا دەبەیت.

بۆ نموونە، بەگریمانەیەک کە تۆ باندلەری جاڤاسکڕێپتی خۆت وەک 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/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';

بەم شێوەیە، تۆ هیچ جاڤاسکڕێپتێک ناخەیتە ناوەوە کە بەنیازی بەکارهێنانی نییە بۆ پێکهاتەکانی وەک دوگمە و کارۆسێل و ئامرازەکان. ئەگەر خەریکی هاوردەکردنی درۆپداونەکان، ئامرازەکان یان پۆپۆڤەرەکان دەکەیت، دڵنیابە کە وابەستەیی Popper لە package.jsonفایلەکەتدا لیست دەکەیت.

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

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

پێشگرێکی ئۆتۆماتیکی .browserslistrc

Bootstrap پشت بە Autoprefixer دەبەستێت بۆ زیادکردنی پێشگرەکانی وێبگەڕ بە شێوەیەکی ئۆتۆماتیکی بۆ هەندێک تایبەتمەندی CSS. پێشگرەکان لەلایەن .browserslistrcفایلەکەمانەوە دیکتە دەکرێن، لە ڕەگی ڕیپۆی Bootstrap دا دەدۆزرێتەوە. خۆکارکردنی ئەم لیستەی وێبگەڕەکان و دووبارە کۆکردنەوەی ساس بە شێوەیەکی ئۆتۆماتیکی هەندێک CSS لە CSS ی کۆکراوەت لا دەبات، ئەگەر پێشگرەکانی فرۆشیار هەبن کە تایبەتن بەو وێبگەڕە یان وەشانە.

CSS بەکارنەهاتوو

یارمەتیت دەوێت لەم بەشەدا، تکایە بیر لە کردنەوەی PR بکەرەوە. سوپاس!

لە کاتێکدا ئێمە نموونەیەکی پێشوەختەمان نییە بۆ بەکارهێنانی PurgeCSS لەگەڵ Bootstrap، هەندێک بابەت و ڕێنمایی یارمەتیدەر هەن کە کۆمەڵگا نووسیویەتی. لێرەدا چەند بژاردەیەک دەخەینەڕوو:

• https://medium.com/dwarves-foundation/لابردنی-ستایلە-css-بەکارنەهێنراوەکان-لە-bootstrap-بە بەکارهێنانی-purgecss-88395a2c5772
• https://lukelowrey.com/بە شێوەیەکی ئۆتۆماتیکی css-بەکارهێنراو-لە-بۆتستراپ-یان-چوارچێوەکانی-دیکە-لابردنی-لابردنی-بەکارهێنراو/

لە کۆتاییدا ئەم بابەتە CSS Tricks لەسەر CSS بەکارنەهاتوو چۆنیەتی بەکارهێنانی PurgeCSS و ئامرازە هاوشێوەکانی تر نیشان دەدات.

بچووککردنەوە و gzip

هەرکاتێک دەتوانیت دڵنیابە هەموو ئەو کۆدانەی کە خزمەت بە سەردانکەرەکانت دەکەیت پاڵپێوەناوە. ئەگەر پەڕگەکانی Bootstrap dist بەکاردەهێنیت، هەوڵبدە پابەند بیت بە وەشانی بچووککراوەوە (بە درێژکراوەکانی .min.cssو ئاماژەی پێکراوە). .min.jsئەگەر لە سەرچاوەوە بە سیستەمی دروستکردنی خۆت Bootstrap دروست دەکەیت، دڵنیابە کە بچووککەرەوەی تایبەت بە خۆت بۆ HTML و CSS و JS جێبەجێ دەکەیت.

فایلە بلۆک نەکراوەکان

لە کاتێکدا کە بچووککردنەوە و بەکارهێنانی پاڵپێوەنان ڕەنگە بەس دەرکەوێت، بەڵام کردنی فایلەکانت بە نابلۆککەر هەنگاوێکی گەورەیە بۆ ئەوەی ماڵپەڕەکەت بە باشی باشتر بکرێت و بەس خێرا بێت.

ئەگەر لە گووگڵ کرۆمدا پێوەکراوێکی Lighthouse بەکاردەهێنیت ، لەوانەیە تووشی FCP بووبیت. پێوەرەکەی یەکەم بۆیاخکردنی ناوەڕۆک ئەو کاتە دەپێوێت کە لاپەڕەکە دەست دەکات بە بارکردن تا کاتێک هەر بەشێک لە ناوەڕۆکی لاپەڕەکە لەسەر شاشەکە ڕەندەر دەکرێت.

دەتوانیت FCP باشتر بکەیت بە دواخستنی جاڤاسکڕێپت یان CSS ی ناگرینگ. ئەمە مانای چیە? بە سادەیی، جاڤاسکڕێپت یان ستایلەکان کە پێویست ناکات لە یەکەم بۆیەی لاپەڕەکەتدا ئامادەبن، پێویستە بە asyncیان deferتایبەتمەندی نیشانە بکرێن.

ئەمەش دڵنیای دەدات لەوەی کە سەرچاوە کەمتر گرنگەکان دواتر باردەکرێن و یەکەم بۆیاخ بلۆک ناکرێت. لە لایەکی دیکەوە دەتوانرێت سەرچاوە گرینگەکان وەک سکریپتی ناو هێڵ یان ستایلەکان بخرێتە ناوەوە.

ئەگەر دەتەوێت زیاتر دەربارەی ئەم بابەتە بزانیت، لە ئێستاوە زۆر بابەت و بابەتی نایاب لەسەری هەیە:

• https://web.dev/سەرچاوەکانی-بلۆککردنی-ڕێندەر/
• https://web.dev/دواخستنی-نا-ڕەخنەگرانە-css/

هەمیشە HTTPS بەکاربهێنە

ماڵپەڕەکەت تەنها دەبێت لە ڕێگەی پەیوەندییەکانی HTTPS لە بەرهەمهێناندا بەردەست بێت. HTTPS ئاسایش و نهێنی و بەردەستبوونی هەموو ماڵپەڕەکان باشتر دەکات و شتێک نییە بە ناوی ترافیکی وێبی ناهەستیار . هەنگاوەکانی ڕێکخستنی ماڵپەڕەکەت بۆ ئەوەی بە تایبەتی لە ڕێگەی HTTPSەوە خزمەت بکرێت بە شێوەیەکی بەرفراوان دەگۆڕێت بەپێی بیناسازی و دابینکەری هۆستکردنی وێبەکەت، و بەمجۆرە لە دەرەوەی بازنەی ئەم دۆکیومێنتانەن.

هەروەها ئەو سایتانەی کە لە ڕێگەی HTTPS خزمەت دەکرێن دەبێ دەستیان بگات بە هەموو ستایلەکان، سکریپتەکان و سەروەت و سامانەکانی تر لە ڕێگەی پەیوەندییەکانی HTTPS. ئەگەرنا، تۆ ناوەڕۆکی چالاک تێکەڵاو دەنێری بۆ بەکارهێنەران ، کە دەبێتە هۆی لاوازی ئەگەری کە دەتوانرێت ماڵپەڕێک بە گۆڕینی وابەستەیییەک تێکبدرێت. ئەمەش دەتوانێت ببێتە هۆی کێشەی ئاسایش و ئاگادارکردنەوەی ناو وێبگەڕەکە کە بۆ بەکارهێنەران پیشان بدرێت. جا تۆ لە CDN ەوە Bootstrap وەردەگریت یان خۆت خزمەتی دەکەیت، دڵنیابە لەوەی کە تەنها لە ڕێگەی پەیوەندییەکانی HTTPSەوە دەستت پێی دەگات.