最適化について～Bootstrap5設置ガイド

Sassのインポートに頼る（Lean Sass imports）

アセットパイプラインでSassを使用する場合は、必要なコンポーネントのみを @import してBootstrapを最適化すること。最大の最適化は、bootstrap.scss のレイアウトとコンポーネントの項目から行われる可能性がある。

デフォルトの設定

scss/bootstrap.scss 内
// 構成
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

//レイアウトとコンポーネント
@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 "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 "helpers";

// ユーティリティ
@import "utilities/api";

コンポーネントを使用していない場合は、コメントアウトするか、完全に削除すること。例えば、カルーセルを使用していない場合は、そのインポートを削除して、コンパイルされたCSSにファイルサイズを保存する。Sassインポートにはいくつかの依存関係があり、ファイルを省略するのがより困難になる可能性があることに注意。

JavaScriptに頼る（Lean JavaScript）

BootstrapのJavaScriptには、プライマリdistファイル（bootstrap.js と bootstrap.min.js）のすべてのコンポーネントが含まれている。またバンドルファイル（bootstrap.bundle.js と bootstrap.bundle.min.js）との主要な依存関係（Popper）も含まれている。Sassを使用してカスタマイズしている間は、関連するJavaScriptを必ず削除すること。

例えば、WebpackやRollupなどの独自のJavaScriptバンドラを使用している場合、使用する予定のJavaScriptのみをインポート。以下の例では、モーダルJavaScriptを含める方法を示す：

// 必要なものだけをインポート

// ツールチップやポップオーバーをインポートする場合は、必ずPopperの依存関係を含める
// import "../../node_modules/popper.js/dist/popper.min.js";

import "../../node_modules/bootstrap/js/dist/util.js";
import "../../node_modules/bootstrap/js/dist/modal.js";

この方法では、ボタン、カルーセル、ツールチップなどのコンポーネントに使用する予定のないJavaScriptを含めない。ドロップダウン、ツールチップ、ポップオーバーをインポートする場合は、必ずPopperの依存関係を package.json ファイルにリストアップする。

デフォルトのエクスポート

bootstrap/js/dist 内のファイルはデフォルトのエクスポートを使用するため、それらの1つを使用する場合は、次の手順を実行する必要がある。

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

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

Autoprefixer browserslistrc

BootstrapはAutoprefixerに依存して、特定のCSSプロパティにブラウザ・プレフィックスを自動的に追加。プレフィックスは、Bootstrapリポジトリのルートにある .browserslistrc ファイルによって指定される。このブラウザのリストをカスタマイズしてSassを再コンパイルすると、そのブラウザーやバージョンに固有のベンダープレフィックスがある場合、コンパイルされたCSSから一部のCSSが自動的に削除される。

未使用のCSS（Unused CSS）

この項目のヘルプが必要な場合は、PRを開くことを検討してください。

BootstrapでPurgeCSSを使用するための構築済みの例はないが、コミュニティが作成した役立つ記事やウォークスルーはいくつかある。ここにいくつかのオプションがある：

最後に、未使用のCSSに関するこのCSS Trickの記事では、PurgeCSSやその他の類似のツールの使用方法を示している。

縮小化とgzip（Minify and gzip）

可能な限り、訪問者に提供するすべてのコードは必ず圧縮すること。Bootstrapのdistファイルを使用している場合は、縮小バージョン（.min.css や .min.js 拡張子で示される）を使用すること。独自の構築システムを使用してソースからBootstrapを構築する場合は、HTML、CSS、JSに独自の縮小機能を実装すること。

ノンブロッキング・ファイル（Nonblocking files）

この項目のヘルプが必要な場合は、PRを開くことを検討してください。

常にHTTPSを使用（Always use HTTPS）v5.0.0-beta2更新

Webサイトは、本番環境ではHTTPS接続を経由してのみ利用できる必要がある。HTTPSは、すべてのサイトのセキュリティ、プライバシー、可用性を向上させ、機密性の低いWebトラフィックなどはない。HTTPS経由でのみ提供されるようにWebサイトを構成する手順は、アーキテクチャーとWebホスティングプロバイダーによって大きく異なるため、これらのドキュメントの範囲を超えている。

HTTPS経由で提供されるサイトは、HTTPS接続経由ですべてのスタイルシート、スクリプト、その他のアセットにもアクセスする必要がある。そうしないと、ユーザーに能動的な混在コンテンツを送信することになり、依存関係を変更することでサイトが危険にさらされる可能性のある潜在的な脆弱性につながる。これにより、セキュリティの問題やブラウザ内の警告がユーザーに表示される可能性がある。CDNからBootstrapを取得する場合でも、自分で提供する場合でも、HTTPS接続を経由してのみアクセスするようにすること。

前のページ
CSS変数次のページ
ページがありません