3

Twitter Bootstrap を使用して簡単なアプリを作成しています。メインの HTML ファイルには、次の行があります。

<link rel="stylesheet/less" href="/static/less/style.less">
<script src="/static/js/libs/less-1.3.0.min.js"></script>

そのため、ページを更新するたびに、css 全体が生成されます。これには毎回約 15 秒かかるため、ページが読み込まれるのを待つのは苦痛です。

SimpLESS を使用してより少ないファイルから css を生成しようとしましたが、生成に失敗しました。私はそれを機能させようとしますが、私は何か間違ったことをしていないかどうかも疑問に思っています...

少ないファイルを変更しなくても、毎回 css が生成されるのが嫌いです。どうにかしてcssのキャッシュを少なくする方法はありますか? または、この問題に対する他の代替ソリューションがあるのでしょうか?

4

2 に答える 2

3

.less ファイルの一部を削除して、特定の原因でパフォーマンスが低下しているかどうかを確認することをお勧めします。それほど遅くはないはずです。私の推測では、特定の mixin または関数が問題を引き起こしていると思われます。

また、JavaScript のプロファイリング (Chrome には優れた JS プロファイラーがあります) を行って、低速で繰り返し呼び出される LESS 関連の関数など、明らかな何かが表示されるかどうかを確認することをお勧めします。

これが私の全体的なLESS戦略であり、将来あなたに役立つかもしれません. 私は Visual Studio と ASP.Net を使用していますが、さまざまな環境でこれを行うことができます。

  • 最も重要なことは、LESS には JavaScript がありません。すべてがサーバー側で行われます。

  • 開発中は、.less ファイルを処理してキャッシュを処理するdotLess HTTP ハンドラーを介して .less ファイルを要求します。ときどきキャッシュに問題が発生し、ローカル Web サーバーを再起動する必要がありますが、大したことではありません。これにより、レスをリアルタイムで変更し、ページを更新するだけでそれらを確認できます。それも速いです。

例：<link rel="stylesheet" href="foo.less" />

  • 本番環境では、ビルド アクションを使用して .less ファイルを 1 つの CSS ファイルにコンパイルし、その CSS ファイルをページ内で直接参照します。これにより、方程式から動的なものがすべて取り除かれます。

例：<link rel="stylesheet" href="final.css" />

于 2012-09-01T15:02:52.357 に答える