ئەلالاشتۇرۇش

ئورۇق ساس ئىمپورت قىلىدۇ

مۈلۈك تۇرۇبىڭىزدا Sass نى ئىشلەتكەندە ، پەقەت @importئېھتىياجلىق زاپچاسلارنىلا ئىشلىتىپ Bootstrap نى ئەلالاشتۇرۇڭ. سىزنىڭ ئەڭ چوڭ ئەلالاشتۇرۇشىڭىز بەلكىم 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 دىكى ھۆججەتنىڭ چوڭ-كىچىكلىكىنى ساقلاش ئۈچۈن بۇ ئىمپورتنى ئېلىڭ. ئېسىڭىزدە تۇتۇڭ ، Sass ئىمپورتىدا بىر قىسىم تايىنىشچانلىقى بار ، بۇ ھۆججەتنى ئۆچۈرۈۋېتىشى مۇمكىن.

ئورۇق JavaScript

Bootstrap نىڭ JavaScript بىزنىڭ دەسلەپكى dist ھۆججىتىمىز ( bootstrap.jsۋە ) دىكى بارلىق زاپچاسلارنى ئۆز ئىچىگە ئالىدۇ ، ھەتتا باغلانما ھۆججىتىمىز ( ۋە ) bootstrap.min.jsبىلەن بىزنىڭ ئاساسلىق بېقىنىشىمىز (Popper) نى ئۆز ئىچىگە ئالىدۇ . Sass ئارقىلىق خاسلاشتۇرغاندا ، مۇناسىۋەتلىك JavaScript نى ئۆچۈرۈۋېتىڭ.bootstrap.bundle.jsbootstrap.bundle.min.js

مەسىلەن ، ئۆزىڭىزنىڭ Webpack ياكى Rollup غا ئوخشاش ئۆزىڭىزنىڭ JavaScript باغلىغۇچنى ئىشلىتىۋاتقانلىقىڭىزنى پەرەز قىلسىڭىز ، سىز ئىشلىتىشنى پىلانلىغان JavaScript نىلا ئەكىرىسىز. تۆۋەندىكى مىسالدا ، بىزنىڭ مودېل JavaScript نى قانداق ئۆز ئىچىگە ئالىدىغانلىقىمىزنى كۆرسىتىمىز:

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

بۇنداق بولغاندا ، سىز كۇنۇپكا ، كارۇسېل ۋە قورال قوراللىرى قاتارلىق زاپچاسلارغا ئىشلىتىشنى ئويلىمىغان JavaScript نى ئۆز ئىچىگە ئالمايسىز. ئەگەر تامچە ، قورال قوراللىرى ياكى ئېلېكترونلۇق كۆزنەكلەرنى ئەكىرىۋاتقان بولسىڭىز ، ھۆججىتىڭىزدىكى Popper بېقىنىشچانلىقىنى جەزملەشتۈرۈڭ package.json.

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

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

Autoprefixer .browserslistrc

Bootstrap Autoprefixer غا باغلىق بولۇپ ، مەلۇم CSS خاسلىقىغا توركۆرگۈ ئالدى قوشۇلغۇچىسىنى ئاپتوماتىك قوشىدۇ. .browserslistrcئالدى قوشۇلغۇچىسى Bootstrap repo نىڭ يىلتىزىدىن تېپىلغان ھۆججىتىمىز تەرىپىدىن بەلگىلىنىدۇ . بۇ توركۆرگۈچلەرنىڭ تىزىملىكىنى ئىختىيارىي قىلىش ۋە Sass نى قايتا قۇرۇش سىزنىڭ توركۆرگۈ ياكى نەشرىگە خاس ساتقۇچىلارنىڭ ئالدى قوشۇلغۇچىسى بولسا ، سىز تۈزگەن CSS دىن بەزى CSS نى ئاپتوماتىك ئۆچۈرۈۋېتىدۇ.

ئىشلىتىلمىگەن CSS

بۇ بۆلەكتە لازىملىق ياردەم ، PR ئېچىشنى ئويلىشىپ كۆرۈڭ. رەھمەت!

گەرچە بىزدە Bootstrap ئارقىلىق PurgeCSS نى ئىشلىتىشنىڭ ئالدىنئالا ئۈلگىسى بولمىسىمۇ ، ئەمما مەھەللە يازغان بىر قىسىم پايدىلىق ماقالىلەر ۋە قەدەم باسقۇچلار بار. بۇ يەردە بىر قانچە تاللاش بار:

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/ ئاپتوماتىك- قايتا-قايتا ئىشلىتىلدى.

ئاخىرىدا ، ئىشلىتىلمىگەن CSS ھەققىدىكى بۇ CSS Tricks ماقالىسىدە PurgeCSS ۋە شۇنىڭغا ئوخشاش باشقا قوراللارنى قانداق ئىشلىتىش كۆرسىتىلدى.

Minify and gzip

ئىمكانقەدەر زىيارەتچىلىرىڭىزگە مۇلازىمەت قىلغان بارلىق كودلارنى پىرىسلاشنى جەزملەشتۈرۈڭ. ئەگەر Bootstrap dist ھۆججىتىنى ئىشلىتىۋاتقان بولسىڭىز ، كىچىكلىتىلگەن نەشرىدە چىڭ تۇرۇڭ ( كېڭەيتىلگەن .min.cssۋە .min.jsكېڭەيتىلگەن). ئەگەر سىز ئۆزىڭىزنىڭ قۇرۇلۇش سىستېمىسى بىلەن مەنبەدىن Bootstrap نى قۇرغان بولسىڭىز ، HTML ، CSS ۋە JS ئۈچۈن كىچىكلىتىلگەن پروگراممىلارنى ئەمەلىيلەشتۈرۈڭ.

چەكلەنمەيدىغان ھۆججەتلەر

پىرىسلاشنى كىچىكلىتىش ۋە ئىشلىتىش قارىماققا يېتەرلىكتەك قىلسىمۇ ، ھۆججەتلىرىڭىزنى توسۇۋالمايدىغان قىلىپ قويۇشمۇ تور بېتىڭىزنى ئەلالاشتۇرۇش ۋە يېتەرلىك تېز قىلىشتىكى چوڭ قەدەم.

ئەگەر سىز Google Chrome دا ماياك قىستۇرمىسىنى ئىشلىتىۋاتقان بولسىڭىز ، FCP غا چۈشۈپ قالغان بولۇشىڭىز مۇمكىن. بىرىنچى مەزمۇنلۇق بوياق كۆرسەتكۈچى بەت يۈكلەشكە باشلىغان ۋاقىتتىن باشلاپ بەتتىكى مەزمۇنلارنىڭ مەلۇم قىسمى ئېكراندا كۆرسىتىلگەن ۋاقىتنى ئۆلچەيدۇ.

ھالقىلىق بولمىغان JavaScript ياكى CSS نى كېچىكتۈرۈش ئارقىلىق FCP نى ياخشىلىيالايسىز. بۇ نېمىدىن دېرەك بېرىدۇ؟ ئاددىي قىلىپ ئېيتقاندا ، JavaScript ياكى ئۇسلۇب جەدۋىلى بېتىڭىزنىڭ بىرىنچى بوياقتا بولۇشىنىڭ ھاجىتى يوق asyncياكى بەلگە بولۇشى كېرەك defer.

بۇ مۇھىم بولمىغان مەنبەلەرنىڭ كېيىن يۈكلىنىشىگە ۋە تۇنجى بوياقنى توسۇۋالماسلىقىغا كاپالەتلىك قىلىدۇ. يەنە بىر جەھەتتىن ، ھالقىلىق مەنبەلەرنى ئورگىنال ياكى ئۇسلۇب قىلىپ ئۆز ئىچىگە ئالىدۇ.

ئەگەر بۇ توغرىلىق تېخىمۇ كۆپ بىلىمگە ئېرىشمەكچى بولسىڭىز ، بۇ توغرىلىق نۇرغۇن ئېسىل ماقالىلەر بار:

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

ھەمىشە HTTPS ئىشلىتىڭ

تور بېتىڭىز پەقەت ئىشلەپچىقىرىشتىكى HTTPS ئۇلىنىشىدىلا ئىشلىتىلىشى كېرەك. HTTPS بارلىق تور بېكەتلەرنىڭ بىخەتەرلىكى ، مەخپىيەتلىكى ۋە ئىشلىتىشچانلىقىنى ئۆستۈرىدۇ ، سەزگۈر تور ئېقىمى دەيدىغان نەرسە يوق . تور بېتىڭىزنى پەقەت HTTPS ئارقىلىقلا مۇلازىمەت قىلىدىغان باسقۇچلار سىزنىڭ بىناكارلىق ۋە تور مۇلازىمىتى تەمىنلىگۈچىڭىزگە ئاساسەن ئوخشىمايدۇ ، شۇڭا بۇ ھۆججەتلەرنىڭ دائىرىسىدىن ھالقىپ كەتتى.

HTTPS ئارقىلىق تەمىنلەنگەن تور بېكەتلەر يەنە HTTPS ئۇلىنىشىدىكى بارلىق ئۇسلۇب جەدۋىلى ، ئورگىنال ۋە باشقا مۈلۈكلەرنى زىيارەت قىلىشى كېرەك. بولمىسا ، سىز ئىشلەتكۈچىلەرگە ئارىلاشما ئاكتىپ مەزمۇنلارنى ئەۋەتىپ ، تايىنىشچانلىقىنى ئۆزگەرتىش ئارقىلىق تور بېكەتنىڭ بۇزۇلۇشى مۇمكىن بولغان يوچۇقلارنى كەلتۈرۈپ چىقىرىسىز. بۇ بىخەتەرلىك مەسىلىسى ۋە تور كۆرگۈچتە ئابونتلارغا كۆرسىتىلگەن ئاگاھلاندۇرۇشلارنى كەلتۈرۈپ چىقىرىدۇ. مەيلى Bootstrap نى CDN دىن ئېلىۋېلىڭ ياكى ئۆزىڭىزگە مۇلازىمەت قىلسىڭىز ، ئۇنى پەقەت HTTPS ئۇلىنىشى ئارقىلىق زىيارەت قىلىشىڭىزغا كاپالەتلىك قىلىڭ.