Replitの使命は、プログラミングをより利用しやすくすることです。私たちは人々に無料のクラウドコンピューティングを提供し、彼らがどのデバイスでもアプリを構築できるようにします。今日インターネット上でアプリケーションを構築するための最も一般的な方法の1つは、Reactです。ただし、歴史的にReactツールはReplitでは低速でした。 JavaScriptエコシステムはプロの開発者向けの優れたツールを作成しましたが、Create React AppやWebpackなど、最も人気のあるツールの多くはより複雑で非効率的になっています。
幸いなことに、JavaScriptコミュニティがこの課題を理解し、より高速で効率的なツールの構築に移行するのを見てきました。これは、ユーザーが期待するエクスペリエンスを最終的に提供できることを意味します。
この新しいエクスペリエンスは、高速で費用効果の高い開発を可能にするJavaScriptビルドツールであるViteに基づいて います。Viteには、HMRまたはホットモジュールの交換、ツールをロールアップと統合するビルドコマンド、組み込みのTypeScriptおよびJSXサポートなどの多くの機能が付属してい ます 。
ViteはReactで開発をスピードアップします。それはかなりスピードアップします。HMRを使用すると、行った変更がミリ秒単位でレンダリングされるため、UIプロトタイピングが大幅に高速化されます。そのことを念頭に置いて、Viteを使用してReactテンプレートを書き直すことにし、どれだけ速くなるかを見てショックを受けました。これは、古いCRAテンプレートと比較した場合の外観です。
過去数週間にわたって、新しいReactテンプレートは、デザイナーが複雑なUIコンポーネントのプロトタイプを作成するのに役立ち、エンジニアリング候補者の多くが（仮想）サイトでわずか数時間でWebアプリケーション全体を作成できるようになりました。これが実際に動作しているのを見ると、その理由を簡単に理解できます。
使い方
Viteは、ソースコードと依存関係を異なる方法で処理することで機能します。ソースコードとは異なり、依存関係は開発中にそれほど頻繁には変更されません。 Viteは、依存関係をesbuildに事前にバンドルすることで、この事実を利用しています 。 EsbuildはGoで記述されたJSビルダーであり、WebpackやParcelなどのJavaScriptベースの代替手段よりも10倍から100倍高速に依存関係をバンドルします。
次に、ネイティブESまたはESMモジュールを介してソースコードを提供します 。これにより、ブラウザで実際のバンドルを処理できるようになります。
最後に、ViteはHMRをサポートしています。これにより、ファイルを編集するときに、バンドル全体を再構築するのではなく、関連するモジュールのみが置き換えられます。これにより、ページが再読み込みされ、状態がリセットされます。他のビルダーとは異なり、Viteは独自のESモジュールでHMRを実行します。つまり、ファイルを編集するときに影響を受けるモジュールを無効にするだけで済みます。これにより、更新時間が一貫して高速になり、アプリケーションの成長に伴って直線的にスケーリングすることがなくなります。
はじめましょう
開始するには、Reactテンプレートをフォークする か、新しいリプレイを作成するときにドロップダウンからReact.jsを選択します 。
Viteはフレームワークに依存しないため、Reactが気に入らない場合は、Vueおよび VanillaJSテンプレートを使用することもできます 。
これがあなたのアイデアをさらに早く実現するのに役立つことを願っています。あなたが作成するものを見るのを楽しみにしています！