View on GitHub

Optimize (最適化)

より重要なことに集中し、最高の体験を提供できるように、プロジェクトを無駄のない、応答性の高い、メンテナンス性が高い状態に保ちましょう。

On this page

Sass のインポートを小さくする

アセットパイプラインで Sass を使うときには、使うコンポーネントのみをインポートして Bootstrap を常に最適にしましょう。bootstrap.scss の Layout & Components セクションで特にその効果を発揮します。

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

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

もしコンポーネントを使わないときには、コメントアウトしましょう。例えば、カルーセルを使わない場合には、それを削除することでコンパイル後の CSS のファイルサイズを節約することができます。Sass の中には相互に依存性をもつものがあるため、ファイルを削除する際には気をつけましょう。

JavaScript を小さくする

Bootstrap の dist フォルダにある基本的な JavaScript (bootstrap.js と bootstrap.min.js) は全てのコンポーネントを含んでおり、またバンドルファイル(bootstrap.bundle.js と boostrap.bundle.min.js) は主な依存ライブラリ(Popper.js)を含んでいます。Sass を用いてカスタマイズする際には、関連する JavaScript を削除するよう注意しましょう。

例えば、Webpack や Rollup のような JavaScript バンドラを使っているとき、使おうとしている JavaScript のみをインポートしているでしょう。以下の例では、modal の 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/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

このようにすることで、ボタンやカルーセル、ツールチップなどの使用しない JavaScript をインクルードしないことができます。ドロップダウンやツールチップ、ポップオーバーをインポートする際には、package.json に Popper を追加しましょう。

デフォルトエクスポート

bootstrap/js/dist 内のファイルは デフォルトエクスポート を使用しているため、次のように記述する必要があります。

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

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

Autoprefixer .browserslistrc

Bootstrap は CSS プロパティにブラウザプレフィックスを付加するために Autoprefixer に依存しています。プレフィックスは .browwerlintrc に記載されており、Bootstrap レポジトリのルートに置かれています。ブラウザのリストをカスタマイズし、Sass を再コンパイルすることで、特定のブラウザのベンダープレフィックスを削除することができます。

使用していない CSS

このセクションでは改善してくださる方を募集しています、ぜひ PR を作成してください！

PurgeCSS を Bootstrap と組み合わせて使用した例がないため、コミュニティが記述した記事を紹介します:

最後に、使用していない CSS に関する CSS Tricks では PurgeCSS などのツールの使い方が書かれています。

Minify と gzip

可能であれば、サイトに公開するコードは全て圧縮しておくことが望ましいです。Bootstrap の dist ファイルを使っている場合は、ミニファイされたバージョン(.min.css か .min.js で示されています)を使うことをおすすめします。Bootstrap をソースから独自システムでビルドしている場合は、独自の HTML、CSS、JS のミニファイを実装するようにしてください。

ノンブロッキングファイル

このセクションでは改善してくださる方を募集しています、ぜひ PR を作成してください！

常に https を使う

このセクションでは改善してくださる方を募集しています、ぜひ PR を作成してください！