Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Optimize (最適化)

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

目次

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

アセットパイプラインで Sass を使うときには、使うコンポーネントのみをインポートして Bootstrap を常に最適にしましょう。bootstrap.scssLayout & 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 "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.jsbootstrap.min.js) は全てのコンポーネントを含んでおり、またバンドルファイル(bootstrap.bundle.jsboostrap.bundle.min.js) は主な依存ライブラリ(Popper.js)を含んでいます。Sass を用いてカスタマイズする際には、関連する JavaScript を削除するよう注意しましょう。

例えば、Webpack や Rollup のような JavaScript バンドラを使っているとき、使おうとしている JavaScript のみをインポートしているでしょう。以下の例では、modal の JavaScript のみをインクルードする方法を示しています。

// Import just what we need

// If you're importing tooltips or popovers, be sure to include the Popper.js dependency
// 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 をインクルードしないことができます。

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 を作成してください!