Tối ưu hóa

Nhập khẩu Lean Sass

Khi sử dụng Sass trong đường dẫn nội dung của bạn, hãy đảm bảo bạn tối ưu hóa Bootstrap bằng cách chỉ @importnhập các thành phần bạn cần. Các tối ưu hóa lớn nhất của bạn có thể sẽ đến từ Layout & Componentsphần của chúng tôi 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";

Nếu bạn không sử dụng một thành phần, hãy bình luận hoặc xóa hoàn toàn thành phần đó. Ví dụ: nếu bạn không sử dụng băng chuyền, hãy xóa nhập đó để lưu một số kích thước tệp trong CSS đã biên dịch của bạn. Hãy nhớ rằng có một số phụ thuộc trong quá trình nhập Sass có thể khiến việc bỏ qua một tệp khó khăn hơn.

JavaScript tinh gọn

JavaScript của Bootstrap bao gồm mọi thành phần trong các tệp dist chính của chúng tôi ( bootstrap.jsvà bootstrap.min.js), và thậm chí cả phần phụ thuộc chính của chúng tôi (Popper) với các tệp gói của chúng tôi ( bootstrap.bundle.jsvà bootstrap.bundle.min.js). Trong khi bạn đang tùy chỉnh qua Sass, hãy nhớ xóa JavaScript có liên quan.

Ví dụ: giả sử bạn đang sử dụng trình gói JavaScript của riêng mình như Webpack hoặc Rollup, bạn chỉ nhập JavaScript mà bạn định sử dụng. Trong ví dụ dưới đây, chúng tôi chỉ ra cách chỉ bao gồm JavaScript phương thức của chúng tôi:

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

Bằng cách này, bạn sẽ không bao gồm bất kỳ JavaScript nào mà bạn không định sử dụng cho các thành phần như nút, băng chuyền và chú giải công cụ. Nếu bạn đang nhập trình đơn thả xuống, chú giải công cụ hoặc cửa sổ bật lên, hãy nhớ liệt kê phần phụ thuộc của Cửa sổ bật lên trong package.jsontệp của bạn.

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

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

Trình sửa lỗi tự động .b Browselistrc

Bootstrap phụ thuộc vào Autoprefixer để tự động thêm tiền tố trình duyệt vào các thuộc tính CSS nhất định. Các tiền tố được quy định bởi .browserslistrctệp của chúng tôi, được tìm thấy trong thư mục gốc của repo Bootstrap. Việc tùy chỉnh danh sách trình duyệt này và biên dịch lại Sass sẽ tự động xóa một số CSS khỏi CSS đã biên dịch của bạn, nếu có tiền tố của nhà cung cấp duy nhất cho trình duyệt hoặc phiên bản đó.

CSS không sử dụng

Cần trợ giúp với phần này, vui lòng xem xét mở một chương trình PR. Cảm ơn!

Mặc dù chúng tôi không có ví dụ dựng sẵn để sử dụng PurgeCSS với Bootstrap, nhưng có một số bài báo và hướng dẫn hữu ích mà cộng đồng đã viết. Dưới đây là một số tùy chọn:

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/

Cuối cùng, bài viết Thủ thuật CSS về CSS không sử dụng này cho biết cách sử dụng PurgeCSS và các công cụ tương tự khác.

Minify và gzip

Bất cứ khi nào có thể, hãy nhớ nén tất cả mã mà bạn phân phối cho khách truy cập của mình. Nếu bạn đang sử dụng tệp dist của Bootstrap, hãy cố gắng sử dụng các phiên bản rút gọn (được chỉ ra bằng phần mở rộng .min.cssvà .min.js). Nếu bạn đang xây dựng Bootstrap từ nguồn với hệ thống xây dựng của riêng mình, hãy đảm bảo triển khai các trình thu nhỏ của riêng bạn cho HTML, CSS và JS.

Tệp không chặn

Mặc dù giảm thiểu và sử dụng tính năng nén có vẻ là đủ, nhưng việc làm cho các tệp của bạn không bị chặn cũng là một bước quan trọng trong việc làm cho trang web của bạn được tối ưu hóa tốt và đủ nhanh.

Nếu bạn đang sử dụng plugin Lighthouse trong Google Chrome, có thể bạn đã gặp phải FCP. Chỉ số First Contentful Paint đo thời gian từ khi trang bắt đầu tải đến khi bất kỳ phần nào của nội dung trang được hiển thị trên màn hình.

Bạn có thể cải thiện FCP bằng cách trì hoãn JavaScript hoặc CSS không quan trọng. Điều đó nghĩa là gì? Đơn giản, JavaScript hoặc các bảng định kiểu không cần phải hiện diện trên lớp sơn đầu tiên của trang của bạn nên được đánh dấu bằng asynchoặc deferthuộc tính.

Điều này đảm bảo rằng các tài nguyên ít quan trọng hơn sẽ được tải sau đó và không chặn lớp sơn đầu tiên. Mặt khác, các tài nguyên quan trọng có thể được bao gồm dưới dạng các tập lệnh hoặc kiểu nội tuyến.

Nếu bạn muốn tìm hiểu thêm về điều này, đã có rất nhiều bài viết hay về nó:

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

Luôn sử dụng HTTPS

Trang web của bạn sẽ chỉ khả dụng qua kết nối HTTPS trong phiên bản sản xuất. HTTPS cải thiện tính bảo mật, quyền riêng tư và tính khả dụng của tất cả các trang web và không có thứ gì gọi là lưu lượng truy cập web không nhạy cảm . Các bước để định cấu hình trang web của bạn được phục vụ riêng qua HTTPS rất khác nhau tùy thuộc vào kiến ​​trúc và nhà cung cấp dịch vụ lưu trữ web của bạn, do đó nằm ngoài phạm vi của các tài liệu này.

Các trang web được phân phát qua HTTPS cũng phải truy cập vào tất cả các biểu định kiểu, tập lệnh và các nội dung khác qua kết nối HTTPS. Nếu không, bạn sẽ gửi cho người dùng nội dung hoạt động hỗn hợp , dẫn đến các lỗ hổng tiềm ẩn trong đó một trang web có thể bị xâm phạm bằng cách thay đổi phần phụ thuộc. Điều này có thể dẫn đến các vấn đề bảo mật và cảnh báo trong trình duyệt được hiển thị cho người dùng. Cho dù bạn đang nhận Bootstrap từ CDN hay tự phục vụ nó, hãy đảm bảo rằng bạn chỉ truy cập nó qua kết nối HTTPS.