RSpack を理解することを学ぶ

1. はじめに

• Rspack GitHub リポジトリ、Rspack クイック スタート。

• Rspack は、 RustByteDance Web Infra言語に基づいて Byte チームによって開発された高性能ビルド ツールです。Web

• Rust は、効率的で信頼性の高い汎用の高級言語です。その効率の高さは開発効率だけでなく、実行効率も高く評価されており、開発効率と実行効率の両方を考慮した数少ない言語の1つです。

• Rspack現在React、Vue、Svelte、 、Solid、NestJS、予備Angularサポートをサポートしていますが、多くの機能が欠落しており、その他には 、 などが含まれStorybookます。Modern.jsModern.js Doc

2. 特長

• アドバンテージ

  • 起動速度:Rust実装に基づくと、ビルド速度は非常に高速です。

  • HMR(ホット アップデート): 組み込みの増分コンパイル メカニズムはHMR非常に高速で、大規模なプロジェクトの開発に完全に対応します。

  • 互換性のあるwebpackエコロジー:webpackのアーキテクチャとエコロジーと互換性があり、エコロジーを最初から構築する必要はありません。

  • 組み込みの共通ビルド機能: TypeScript、JSX、CSS、CSS ModulesなどのSassすぐに使えるサポートを提供します。

  • Tree Shakingデフォルトの運用最適化: デフォルトでは、 、代码压缩などのさまざまな最適化戦略が組み込まれています。

  • Buildパフォーマンス:5~10コンパイルのパフォーマンスが 100% 向上しました。

  • …

• 欠点がある

  • Loaderサポートが限定されているPlugin現状では主に組み込みに依存している 高度なポイントの使用が面倒かサポートが限定されている 組み込み後の設定は比較的簡単

  • より大規模なプロジェクトに適しており、実行速度と速度はの1 倍をBuild維持できますが、小規模および中規模のプロジェクトの改善は限定的です。webpack5-10

  • nodejs 14上記のプロジェクトの移行のみがサポートされています。

  • …

3. 性能比較

• ツールの比較

  

• Byte 内部プロジェクト移行後の利点

  

4. アーキテクチャ設計

• 4アスペクト周りを中心に構造図付き

  

  • コアアーキテクチャは以下から生まれました。Wabpack5

    Wabpack長年にわたってテストされているため、全体的な構造の安定性は非常に高いです。

  • Native言語ベースの高同時実行フレームワーク

    Rustこれは、それ自体が言語ですNative。この動的言語と比較するとJS、高度に最適化でき、より高いパフォーマンスのボトルネックがあります。JSこの言語はV8、いくつかの最適化ではすでに優れていますが、その欠点はマルチスレッドのサポートにあり、マルチスレッドの実装によってもたらされる利点ははるかに低いですRust。

  • Rust代替Babel品に基づいてSWC

    WebpackエコロジーのほとんどはLoaderと のPlugin拡張に基づいています。主な点は、Loader従来のツールを使用してBabel Loader実行することですがBabel Loader、比較的遅いため、代わりにRust使用されます。 によるパフォーマンスの向上と比較して、比較的高い貢献をしているため、開発中に の使用を回避できます。SWCSWCBabelRspackBabel Loader

  • とにNAPI-RS基づいた効率的なコミュニケーションRustJS

    コアはRustで書かれていますが、プラグイン拡張は で書かれています。一方で、一部の開発者はプラグイン開発を学ぶ必要JSがあり、開始コストが比較的高くなります。それはより困難です。クロスプラットフォーム プログラミングの知識全体に精通している必要があります。各プラグインは多くのプラットフォームの製品をコンパイルし、それらを異なるプラットフォームに配布する必要がある場合があります。このしきい値は比較的高く、安定性を制御するのは簡単ではありません。RustJSRustNativeJSRustNative CodeNative Code操作系统CPUWindowsMacNative

5. 移行の原則

• 原則の 1 つは、最適なパフォーマンスを確保できる組み込み機能の使用を優先することです。たとえば、関連する機能は使用しないでください。よく使用される機能は基本的に組み込みです。使用する必要がある場合は、影響を狭い範囲に制御する必要があります。それらを大規模に使用すると、パフォーマンスの低下の可能性がより顕著にBabel LoaderなりBabelますRspack。

• css関連して、webpackこれは通常style-loader、css-loader処理に使用されますが、をRspack使用しSWCて実装され、デフォルトで有効になっているため、これらの を使用する代わりにexperiments.css組み込み機能を使用することをお勧めします。cssLoader

• リソースモジュールはAsset Modules処理に使用することを推奨しており、以前のリソースなどを置き換えるためwebpack5にも使用します。Asset Modulesfile-loader、url-loader、raw-loader

• htmlRustこの世代もプラグインの組み込みバージョンですが、機能が少し弱い可能性があります。htmlレベルでのカスタマイズ要件が比較的高い場合は、それを使用できます@rspack/plugin-html。これはバージョンです。JSパフォーマンスはRustバージョンより遅くなりますが、拡張機能は高くなっています。

QA

• ViteどちらがRspack良いでしょうか？

  これはシナリオによって異なりますが、Vite中小規模のシナリオの開発エクスペリエンスとエコロジーは優れています。たとえば、いくつかのSSRサポートがあれば、Rspack現時点では負荷の高いアプリケーション (企業内など庞大的B端应用) により適しており、コンパイル速度を5-103 倍に高めることができます。

• 現段階では移行が推奨されますかRspack?

  これは、高度な機能やプラグインを使用しているかどうかによって異なります。現段階ではサポートされていない可能性があります。サポート状況を確認する必要があります。つまり、深いカスタマイズや操作がなければ、大きな問題はないと考えられますので、試してみてくださいwebpack。