SASSをより速くするための概念の証明

当初、SASSコンピレーションは非常に高速です。特に、ブラウザのインス​​タントアップデートのためにbrowsersyncで使用する場合。ただし、SASSプロジェクトが成長するにつれて、コンピレーション時間は必然的に増加し、ワークフローに影響を与えます。この記事では、このパフォーマンスのボトルネックに対処するために、WordPress CSSエディターMicrothemerで実証されたソリューションを紹介します。

これは2部構成の探索です。パート1では、SASSユーザーの利点に焦点を当て、コア原則の紹介、パフォーマンスの改善、インタラクティブなデモを紹介します。パート2では、Microthemerの速度最適化の技術的な詳細を掘り下げ、NPMパッケージがより広い開発者コミュニティに利益をもたらす可能性を調査します。

MicrothemerのインスタントSASSコンピレーション

Microthemerは、必要なSASSコードのみをコンパイルすることにより、驚くべきパフォーマンスを実現します。 SASSの内部編集を変更するのではなく、再コンパイルに必要な最小コードをインテリジェントに選択します。

これは、SASSエンティティ（変数、ミックスなど）とその使用を追跡することによって達成されます。セレクターが変更されると、そのセレクターと直接関連するセレクター（変数の共有または拡張）のみが再コンパイルされます。これにより、数千のセレクターがあっても速度が維持されます。

パフォーマンスベンチマーク

3000のセレクターを使用すると、コンピレーションタイムは約0.05秒で、時には0.1秒または0.01秒（10ms）に達することがあります。ビデオデモンストレーションとオンラインの遊び場は、実践的なテストに利用できます。

オンラインマイクロテマーの遊び場

オンラインプレイグラウンドを使用して、マイクロテマーを直接実験してください。

1. マイクロテマーの遊び場にアクセスします。
2. SASSサポートの有効化： General → Preferences → CSS / SCSS → Enable SCSS 。
3. 完全なコードエディターを開きます： View → full code editor → on （グローバル変数、ミキシンなどの場合）。
4. メインUIビューに戻る： View → full code editor → off 。
5. ターゲットボタンを使用してセレクターを作成します。
6. 編集者にSASSコードを追加します（Font Property Groupの左）。
7. コンパイルされたコードを表示： View → Generated CSS → Previous SCSS compile 。
8. スケーラビリティテスト用の大きなCSS（SASSではない）をインポート： Packs → Import → CSS stylesheet 。

NPMパッケージ？

Microthemerの選択的コンパイルは、NPMモジュールとしてパッケージ化できます。これはあなたが価値があると思うものですか？ SASSワークフローのスピードブーストは有益ですか？コメントでお知らせください。

この記事の残りの部分では、コミュニティツールの開発者とソリューションの実装に興味があるものを対象としています。

SASSコンピレーションに対するマイクロテマーのアプローチ

コードに飛び込む前に、主要な設計目標を確認しましょう。

1. 最小コードコンパイル：変更されたセレクターまたは関連するセレクターの最小セットのみをコンパイルします。
2. 応答性：知覚される遅延を排除します。ユーザーインタラクション間の処理を最小限に抑えます。
3. 同等の出力：完全なコンピレーションと同一のCSSを生成しますが、コードのサブセットの場合。

SASSコードの例

次のコードは、選択的コンパイラによって処理されるシナリオを示しています：グローバル変数、ミックス副作用、および拡張セレクター。

変数、関数、およびミキシン

$プライマリカラー：緑;
$セカンダリカラー：赤;
$ dark-color：黒;

@Function Torem（$ PX、$ ROOTSIZE：16）{
  @return＃{$ px / $ rotsize} rem;
}

@mixin rounded（）{
  ボーダーラジウス：999px;
  $セカンダリカラー：Blue！Global;
}

セレクター

.Entry-Title {
  色：$ dark-color;
}

.btn {
  ディスプレイ：インラインブロック。
  パディング：1EM;
  色：白;
  テキスト装置：なし;
}

.btn-success {
  @extend .btn;
  バックグラウンドカラー：$プライマリカラー;
  @include丸。
}

.btn-error {
  @extend .btn;
  バックグラウンドカラー：$セカンダリカラー;
}

@media（min-width：960px）{
  .btn-success {
    境界線：4px Solid Darken（$ Primary-Color、10％）;
    ＆：：前に {
      コンテンツ： "\ 2713";
      マージン右：.5em;
    }
  }
}

Microthemerのユーザーインターフェイス

Microthemerは2つの主なビューを使用しています。

1. 完全なコードビュー：グローバル要素の標準SASSエディター。
2. ビジュアルビュー：各セレクターが個別のUI要素であるセレクターベースのインターフェイス。

この粒度セレクターアプローチにより、非常に効率的な分析が可能になります。 （注：以前のスクリーンショットの青いエラーボタンは、ミックスインサイドエフェクトが$secondary-colorを変更するためです。）

サードパーティライブラリ

マイクロスマーのレバレッジ：

• Gonzales PE：サスからアストへの変換。
• sass.js：ブラウザベースのSASS-to-CSSコンパイル用（Webワーカーを使用）。

データ構造

コアデータ構造は、効率的な処理に不可欠です。 Microthemerは4つの主要なJavaScriptオブジェクトを使用しています。

1. projectCode ：個々のセレクター用にセグメント化されたすべてのプロジェクトコードを保存します。
2. projectEntities ：変数、関数、ミキシン、拡張、輸入、およびその場所を追跡します。
3. connectedEntities ：SASSエンティティのコード依存関係をマップします。
4. compileResources ：選択的なコンパイルのデータを保持します。

これらのオブジェクトとそのプロパティの詳細な説明（例、 projectCode 、 itemData 、 projectEntities 、 itemDeps 、 connectedEntities 、 compileResources ）は広範であり、この長い応答の長さを大幅に増加させます。ただし、コアコンセプトは、これらの構造により、依存関係の効率的な追跡と、再コンパイルに必要なコードのみの選択が可能になることです。

gatherCompileResourcesは、再帰を使用して機能し、コンパイルのためにすべての従属コードセグメントをインテリジェントに識別し、収集します。アプリケーションプロセスは、この最小限のコードセットをコンパイルし、スタイルを更新します。

NPMパッケージの考慮事項

これをNPMパッケージに適応させるには、アドレス指定が必要です。

• コードセグメンテーション：大きなファイルと潜在的な仮想セグメンテーション手法の効率的な処理。
• SASSのインポート：すべてのインポートを無差別に含めるのではなく、すべてのプロジェクトファイルでSASS使用を追跡します。

結論

このアプローチは、選択的なSASSコンピレーションの新しい方法を提供します。インスタント近くのコンピレーションは、Microthemerのライブ編集にとって重要ですが、他の環境にも利益をもたらす可能性があります。 NPMパッケージを作成する決定は、コミュニティの需要に依存します。フィードバックと質問は大歓迎です。

以上がSASSをより速くするための概念の証明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。