Vize

パフォーマンスチューニング

フロントエンド ツールチェーンのパフォーマンス チューニングは 1 つのコツではありません。

「Rust で書き直して」グラフが上がるのを待つわけではありません。これは、時間がどこにかかるか、メモリがどのくらいの頻度で移動するか、どれだけの作業が重複するか、アーキテクチャによって改善が複合化されるかどうかについての、小さくて具体的な決定の長期にわたる一連の作業です。

このメモは、Vize が最適化を続けていることの知識を共有するものです。

ソース ファイル、ネイティブ分析、スナップショット、アクション、出荷の信頼性を示すフィードバック ループ図

ループ全体を測定する

コンパイラのベンチマークは便利ですが、開発者のエクスペリエンス全体を網羅するものではありません。

Vue ツールチェーンにはいくつかのフィードバック ループがあります。

  • 開発サーバーでの 1 つのファイルのコンパイル

  • 完全な実稼働ビルド

  • 多くのファイルをリンティングする

  • 多くのファイルをフォーマットする

  • 生成された仮想ファイルの型チェック

  • ユーザーが入力している間のエディター診断

  • 実際のアプリケーション全体にわたる CI チェック

  • AI が生成したパッチは繰り返し検証されます

最も遅いループが必ずしも最も明らかなループであるとは限りません。

単独では高速に見える関数でも、すべてのステージで実行すると有害になる可能性があります。すべてのトークン、すべての AST ノード、すべての診断、および生成されたすべてのセグメントで割り当てが発生する場合、小さな割り当てでも問題になる可能性があります。

これが、Vize がパフォーマンスをコンパイラーのプロパティだけでなくツールチェーンのプロパティとして扱う理由です。

重複作業を避ける

最も信頼性の高い最適化は、作業を 2 回実行しないことです。

断片化されたセットアップでは、同じ .vue ファイルを次のように個別に解析できます。

  • コンパイラ

  • リンター

  • フォーマッタ

  • 型チェッカー

  • エディターの統合

  • コンポーネントのドキュメントパイプライン

これには費用がかかりますが、より深刻な問題はアーキテクチャにあります。すべてのツールがファイルについて独自の理解を構築する場合、パフォーマンスのチューニングはローカルで限定的なものになります。

Vize は共有構造を中心に設計されています。

  • 可能な限り一度解析する

  • SFC ブロック境界を安定に保つ

  • コンパイラと診断全体でテンプレート構造を再利用します

  • セマンティック分析で複数の消費者にフィードを提供できるようにする

  • 入力が変更されない限り、仮想 TypeScript の再生成を回避します

多くの場合、最良の最適化とは、より適切な所有権境界を設定することです。

割り当ては詳細ではなく機能です

フロントエンド ツールは、トークン、ノード、スパン、文字列、スコープ、診断、生成されたコード フラグメントなど、多くの小さなオブジェクトを処理します。

これらのオブジェクトが無造作に割り当てられた場合、ツールチェーンがどこにいても料金を支払います。

Vize は割り当て動作に大きな圧力をかけます。

  • 有効期間の短いコンパイラー データ用のアリーナ スタイルのストレージ

  • 繰り返される識別子または名前が重要な場合の文字列インターン

  • コピーされた部分文字列の代わりにスパンをコンパクトにします

  • 所有権が不要な借用スライス

  • 大規模なクローン構造の代わりに安定した内部 ID

目標は、それ自体のためにコードを賢くすることではありません。

目標は、ホット パスを退屈なものにすることです。割り当て、コピー、キャッシュ ミスを減らし、アロケーターがプロファイルの一部になる理由を減らします。

並列処理には形状が必要

並列処理は「スレッドをオンにする」ことではありません。

問題に明確な境界がある場合に最も効果的です。

  • 多くの独立したファイル

  • 決定論的な集計

  • 予測可能な出力順序

  • 共有されたグローバルな突然変異はありません

  • 制限されたキャッシュとセッション

Vue のコンパイル、リンティング、およびフィクスチャ スイープは、多くの場合、自然なファイル レベルの並列形式をとります。ただし、型チェックとエディターのワークフローはプロジェクトの状態に依存するため、より複雑です。

そこで Vize は質問を次のように分割します。

  • このファイルレベルの作業は独立して実行できますか?

  • このステップには常駐プロジェクト セッションが必要ですか?

  • 出力順序はユーザーに表示されますか?

  • スレッド数が変わっても診断は安定していますか?

  • 並列処理により、勝利が消えるほどメモリ負荷が増加しますか?

高速だが不安定な出力では十分ではありません。パフォーマンスの仕事では信頼を維持する必要があります。

ソース マッピングがホット パスになる可能性がある

Vue ツールは中間コードを生成することがよくあります。

つまり、適切な診断にはすべて戻るパスが必要です。

  • 元のテンプレートに TypeScript を生成

  • SFCソースへのレンダリングコードを生成

  • 変換されたスタイルまたはスクリプト出力を元のブロックに出力

  • 仮想モジュール ID を実際のファイルに戻す

ソース マッピングが遅かったり不正確だったりすると、ツールチェーン全体に影響が生じます。ユーザーには診断が間違った場所に表示されます。 AI 修復ループの座標が低下します。テストは脆弱になります。

したがって、ソース マッピングは解析と同様にパフォーマンスに注意を払う必要があります。

  • スパンをコンパクトに保管

  • パス正規化の繰り返しを避ける

  • 生成されたセグメントメタデータを小さく保ちます

  • スナップショットを使用してエッジケースをテストする

  • 成功したコンパイル パスだけでなく、診断負荷の高いワークロードをプロファイルします。

診断は製品表面です。彼らのパフォーマンスは重要だ。

本物のプロジェクトが合成の快適さを打ち破る

マイクロベンチマークは、焦点を絞った質問に答えるときに役立ちます。

しかし、ツールチェーンは実際のプロジェクトに対して実行されると正直になります。

実際のプロジェクトには次のものが含まれます。

  • 奇妙な依存関係のレイアウト

  • 大型SFC

  • レガシーパターン

  • 自動生成されたコード

  • 珍しいディレクティブ

  • プラグインの規約

  • パスのエイリアス

  • プラットフォーム固有のエッジケース

だからこそ、Vize は現実世界のフィクスチャのスイープとスナップショットの構築に投資し続けています。目標は、素晴らしいテスト数を収集することではありません。目標は、運用コードが乱雑であるのと同じようにコードが乱雑な場合にのみ現れるパフォーマンスの崖を明らかにすることです。

パフォーマンスは製品の機能です

速度は行動を変えます。

チェックが遅い場合、チェックを実行する頻度が減ります。 フォーマットが遅いと、フォーマット保存が面倒になります。 型を認識したリンティングが遅い場合、チームはルールを無効にします。 CI が遅い場合、メンテナは変更をバッチ処理し、慎重にレビューしません。 AI の検証が遅い場合、エージェントはより大きくリスクの高い行動をとります。

高速ツールにより、より厳密なワークフローが実用化されます。

それが Vize の本当のパフォーマンスの議論です。目標は、ベンチマークの数値を向上させることだけではありません。目標は、厳密なパスをデフォルトのパスのように感じさせることです。

コンパイル、lint、フォーマット、型チェック、診断が儀式なしで実行できるほど高速になると、品質は特別なイベントではなくなります。

それが通常の働き方になります。