24

私のブートストラップ スタイルシートのサイズは約 120kb です。

しかし、私はそのスタイルシート コードの 25% しか使用していません。

その span* クラスは必要ありません。ブートストラップカスタマイズページでカスタマイズしてみました。

グリッド システムのチェックを外しspan1 - span12 classましたが、フォーム、テーブル、レスポンシブ レイアウトにはまだ表示されます。

誰かがそれらのコードを削除するのを手伝ってくれますか?

4

5 に答える 5

35

うなり声と 1 時間格闘した後、uncss だけを試してみることにしましたが、はるかに簡単でした。数ページしかない場合、または手動で行うことを気にしない場合は、手動で行うことをお勧めします.

uncss ページには完全な手順がありますが、要約すると:

  1. node.js がインストールされている。
  2. npm install -g uncss
  3. uncssページからサンプル ファイルをコピーし、.js 拡張子が付いた任意の名前を付けます。uncss.js という名前を付けました。
  4. files 配列を html ファイルに置き換えます。（のように見えますvar files = ['my', 'array', 'of', 'HTML', 'files']）
  5. stylesheets 配列を独自のスタイルシートに置き換えます。（のように見えますstylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css']）。同様に、必要に応じて「csspath」の値を変更します。
  6. 実行node uncss.js(または uncss ファイルと呼ばれるもの) します。最適化された CSS をコマンド ラインに直接出力するので、.xml などのファイルに保存しますnode uncss.js > mynewcss.css。

動作を調整するためのオプションがたくさんあります。私はそれらをすべて無視し、うまくいきましたが、必要に応じてそこにいます。私がテストしたページは、138kb から 9kb になりました。

于 2015-03-28T02:40:59.733 に答える
7

私はまったく同じ問題を抱えています！

bootstrap.css で未使用の CSS スタイル ルールをすべて削除するツールを作成しました。

その結果、59% ルールが削除され、css ファイルのサイズが 121KB から59KB に縮小され、 Google PageSpeedでテストするとスコアが約 5 増加しました

ソースコードはこちらcss-optimizer

于 2015-03-11T11:14:49.897 に答える
3

ユーザーの読み込み時間に対するファイルサイズの影響についてもっと心配していますか？または、CSSが短い場合は、CSSを読みやすく理解しやすくしたいですか？

いずれにせよ、余分なCSSスタイルをすべて削除することを心配するのにあまり時間をかけないことをお勧めします。使用する予定のないBootstrapの要素のチェックを外し、カスタマイズされたバージョンをダウンロードします。サイトのライブ/本番バージョンでは、最小化されたバージョンのCSSを使用して、ファイルサイズをさらに縮小します。

コードをよりシンプルに使用できるようにしたい場合、それは間違いなく理解できますが、Bootstrapチームはそれを整理するための素晴らしい仕事をしました。少し時間をかけてください。

すべての参照を完全に削除しようとするとspan*、フォームフィールドの幅を制御するなどの機能が削除されることを考慮してください。グリッドを使用していない場合でも、これらは非常に便利です。

于 2013-01-03T10:12:12.067 に答える
1

twitterブートストラップはこれらのspan*クラスに大きく依存していると思います。「ベースCSS」の下の「テーブル」チェックボックスを切り替えるだけでもspan*、とにかくレンダリングされるため、コンパイルされたcssでクラスを取得します。https://github.com/twitter/bootstrap/blob/master/less/tables.lessを見てください：

// R.185: Change the column widths to account for td/th padding
.table td,
.table th {
  &.span1     { .tableColumns(1); }
  &.span2     { .tableColumns(2); }
  &.span3     { .tableColumns(3); }
  &.span4     { .tableColumns(4); }
  &.span5     { .tableColumns(5); }
  &.span6     { .tableColumns(6); }
  &.span7     { .tableColumns(7); }
  &.span8     { .tableColumns(8); }
  &.span9     { .tableColumns(9); }
  &.span10    { .tableColumns(10); }
  &.span11    { .tableColumns(11); }
  &.span12    { .tableColumns(12); }
}

ですから、カスタマイザーでそれらを削除することはできず、手動でのみ削除する必要があります。

于 2013-01-03T10:09:30.590 に答える
1

Joomla に必要なシステムである Bootstrap 2 を使用したテンプレートがあります。これを手動で行っただけで、簡単に実行できることがわかりました。Bootstrap CSS ファイルは非常にうまく構成されており、セクションが整然と並べられています。ファイルの内容全体を に削除しbootstrap_unused.css、それを にもコピーしましたbootstrap_original.css。

次にbootstrap_unused.css、順序を維持するように注意しながら、使用されていることがわかっているものから切り取り、貼り付け直しました。ほとんどは初めて機能し、ファイルサイズが 144KB から 14KB に縮小されました。その後、フォームなどのために少しずつ追加する必要があり、最終的には 30KB になりました。

将来、他の機能が必要になった場合は、それらを元に戻すことができ、bootstrap_unused.cssいつでもbootstrap_original.css参照できます。

于 2017-07-06T19:44:09.460 に答える