オープニング: Vite がフロントエンド エンジニアリングへの道をお手伝いします
現在、プロジェクト開発のプロセスにおいて、フロントエンドエンジニアは構築ツールと切り離せない存在となり、フロントエンドエンジニアリングプロジェクトにおいて構築ツールは標準的な構成となっていると言えます。
乱花渐欲迷人眼しかし、今日のフロントエンド構築ツールは、古代browserify、grunt、伝統的Webpack、Rollup、Parcel現代Esbuildなどと形容できますVite。種類が多いだけでなく、更新も早いです。
したがって、多くの友人から、どのビルド ツールが使いやすく、学ぶ価値があるのかと尋ねられます。実際、ツール レベルがどのように更新されても、それらが解決する中核的な問題、つまりフロントエンド エンジニアリングの問題点は変わりません。したがって、どのツールを使用するのが良いかを知りたい場合は、フロントエンド エンジニアリングの問題点を解決する効果に依存します。
では、フロントエンドエンジニアリングの問題点は何でしょうか?
1 つ目は、フロントエンドのモジュール要件です。業界には、ESM、CommonJS、AMD、CMD などのモジュール標準が多数存在することはわかっています。一方では、フロントエンド エンジニアリングでは、モジュールが正常にロードされるように、これらのモジュール仕様を実装する必要があります。一方で、異なる実行環境に適応するには、異なるモジュール仕様との互換性が必要です。
2 つ目は、ブラウザとの互換性を備え、高度な構文をコンパイルすることです。ブラウザの実装仕様の制限により、高級言語/構文 (TypeScript、JSX など) をブラウザで正常に実行するには、ブラウザが理解できる形式に変換する必要があります。これらすべてにはツールチェーン レベルでのサポートが必要であり、この需要は常に存在します。
もう 1 つは、オンライン コードの品質です。開発段階での考慮の焦点とは異なり、本番環境では、コードの安全性問題を考慮兼容性し、オンライン コードが正常に動作することを確認するだけでなく、コードの実行時のパフォーマンスも考慮する必要があります。ブラウザのバージョンが多く、コードの互換性やセキュリティ ポリシーが異なるため、オンライン コードの品質もフロントエンド エンジニアリングにおける長年の課題となります。
同時に、开发效率無視することもできません。プロジェクトのコールド スタート/2 番目の開始時間とホット アップデート時間は、特にプロジェクトがますます大きくなる場合、開発効率に重大な影響を与える可能性があることを私たちは知っています。そのため、プロジェクトの起動速度やホットアップデート速度の向上もフロントエンドエンジニアリングの重要な要件となります。
では、フロントエンド ビルド ツールは上記の問題をどのように解決するのでしょうか?
- モジュール性の点では、モジュール読み込みスキームを提供し、さまざまなモジュール仕様と互換性があります。
- 文法翻訳に関しては
Sass、TSC、 、Babelなどのフロントエンド ツール チェーンと連携して高度な文法の翻訳機能を完成させると同時に、静的リソースをモジュールとして正常にロードできるように処理します。 - 製品品質の面では、本番環境では
Terser他の圧縮ツールと連携してコードの圧縮と難読化、Tree Shaking未使用のコードの削除、低バージョンのブラウザに対する構文のダウングレード処理などを行います。 - 開発効率の観点では、ビルド ツール自体が などのさまざまな方法でパフォーマンスを最適化し、
使用原生语言 Go/Rustプロジェクトno-bundleの起動パフォーマンスとホット アップデート速度を向上させます。
Vite が現在最も効率的なビルド ツールであるのはなぜですか?
さて、最初の質問に戻りましょう。どのツールを使用するのが良いでしょうか? 言い換えれば、フロントエンド エンジニアリングの問題点を解決するにはどのツールが優れているのでしょうか?
The State of JavaScript Survey の最近の調査結果によると、Vite は世界中の開発者の間で 98% 以上の満足度を誇り、これらの大規模なフレームワークSvelteKitで使用されておりAstro、現在最も人気のあるフロントエンド構築ツールとなっています。こちらもぜひご利用ください。なぜヴィートなのか？上記の 4 つの側面に従ってそれを調べることができます。
1つ目は開発効率です。従来のビルド ツールの一般的な欠点は遅すぎることですが、それらと比較して、Vite はプロジェクトの起動パフォーマンスを一桁向上させ、ミリ秒単位でインスタント ホット アップデート効果を実現します。
Webpack を例に挙げると、一般的なプロジェクトで Webpack を使用した後、起動に数分かかることがよくあり、ホット アップデートでは 10 秒以上待つ必要があることが仕事でわかりました。これは主に次の理由によるものです。
- プロジェクトのコールド スタート時に、プロジェクト全体の依存関係ツリーを再帰的にパッケージ化する必要がある
- JavaScript言語自体の性能制限が構築性能のボトルネックとなり、開発効率に直結します。
このように、コードを変更してもすぐには効果が現れず、自然な開発体験はどんどん悪くなっていくのです。その中で最も時間がかかるのは、コードのパッケージ化とファイルのコンパイルです。
そして、Vite はこれらの問題を非常にうまく解決します。Vite は、開発段階でブラウザのネイティブ ESM のサポートに基づいてサービスを実装する一方で、no-bundleEsbuild の超高速コンパイル速度を使用してサードパーティ ライブラリを構築し、TS/JSX 構文をコンパイルします。開発効率を効果的に向上させることができます。
開発効率に加えて、Vite は他の 3 つの側面でも優れたパフォーマンスを発揮しました。
- モジュール性の点では、Vite はブラウザのネイティブ ESM のサポートに基づいてモジュールの読み込みを実装し、開発環境と運用環境の両方で他の形式 (CommonJS など) の製品を ESM に変換できます。
- 文法の翻訳に関しては、Vite には TypeScript、JSX、Sass などの高度な文法のサポートが組み込まれており、画像やワーカーなどのさまざまな静的リソースを読み込むこともできます。
Terser製品の品質に関しては、Vite は成熟したパッケージング ツール Rollup に基づいて実稼働環境のパッケージングを実装すると同時に、Babelなどのツール チェーンと連携して、構築された製品の品質を大幅に保証できます。
したがって、フロントエンド構築ツールを学びたい場合は、Vite が次善の選択となるでしょう。従来の構築ツールの開発効率の問題を解決するだけでなく、優れた構築ツールのすべての要素を備えており、コミュニティによる大規模な検証と実装も経験しています。
Viteを上手に学ぶにはどうすればいいですか？
しかし、多くの人は Vite を学習して応用する過程で常にさまざまな問題に遭遇します。
たとえば、Vite 学習教材の多くは体系的でも詳細でもないです。ほとんどの記事では、単純な足場プロジェクトを構築する方法しか教えられず、コードさえも必ずしも正しいとは限りません。
教材を通じて Vite に関する知識を学んだ後でも、Vite の生態への理解が不十分なため、実際的な問題に遭遇したときにどのプラグインやソリューションを使用すればよいのかわかりません。
- サードパーティのライブラリに含まれる CommonJS コードが原因でエラーが報告された場合はどうすればよいですか?
- 開発プロセス中に Eslint コード仕様チェックを実行したい場合はどうすればよいでしょうか?
- 実稼働環境でプロジェクトをパッケージ化した後、ビルド製品分析レポートを生成するにはどうすればよいですか?
- ネイティブ ESM をサポートしていないブラウザと互換性を持たせたい場合はどうすればよいですか?
さらに、Vite で使用される基礎的なビルド エンジンである Esbuild と Rollup に慣れていない場合、カスタマイズが必要ないくつかのシナリオに遭遇すると、作業が難しくなることがよくあります。
- 問題の依存関係に対処するための Esbuild プラグインを作成する
- 実際のシナリオでよく発生する循環依存の問題を解決するために、ロールアップ パッケージ製品の解凍をカスタマイズします。
- Esbuild のコード変換および圧縮機能を使用する場合、どのような互換性の問題が発生しますか? の解き方？
もちろん、構築ツールとしての Vite の難しさは、それ自体の柔軟性だけではなく、 などの多くのフロントエンド ツール チェーンの統合と適用にもありBabelますcore-js。
@babel/preset-env属性の値の違いは何ですかuseBuiltIns?@babel/polyfillとの違いは何ですか@babel/runtime-corejs？@babel/plugin-transform-runtimeと比較した@babel/preset-env最適化は何ですかuseBuiltIn?- core-jsの役割は何ですか? その製品にはどのようなバージョンがありますか?
core-jsとはどう違いますかcore-js-pure？
さらに、構築ツール (Vite だけでなく、基礎となるエンジン Rollup も含む) のソース コードが不明瞭で、多数の基本的なツール ライブラリが含まれているため、多くの人の構築ツールの原理の理解は表面的なものにすぎません。そしてさらに先に進むことは困難です。
フロントエンドエンジニアとして現場に深く携わり、様々な構築ツールを扱うことが日々の仕事であり、社内の多くの業務プロジェクトにViteを導入しており、豊富なVite実務経験とソースコード読解経験を持ち、私は Vite ウェアハウスにも貢献しています。コードをいくつか見てみましょう。したがって、Vite での私の実際の経験と学習方法を小冊子を通じて体系的に皆さんに共有できることを非常に嬉しく思います。
では、Vite はどのように学習するのでしょうか? 「ステップバイステップ」「実践的」「拡張性」の3原則に基づき、浅いところから深いところまでコース内容を設計し、実践的なシナリオや事例を豊富に提供するとともに、メソッドや手法も提供します。講座修了後に誰もが学べるよう、できるだけ問題を解決する視点を持ち、具体的には、コースを 5 つのモジュールに分けて設計しました。
基本的な使用法の章では、Vite プロジェクトを 0 から初期化し、さまざまな最新の CSS ソリューションにアクセスし、Eslint、Styelint、Commonlint などの一連の Lint ツール チェーンを統合し、さまざまな形式の静的リソースを処理し、マスターする方法を説明します。 Vite 事前にコンパイルされたさまざまな手法により、最終的には比較的完全な足場プロジェクトを独立して構築できるようになります。
デュアル エンジンの章では、Vite のデュアル エンジン アーキテクチャ、Esbuild および Rollup の基本的な使用法とプラグイン開発を含む関連コンテンツを学び、それらをマスターし、その後の高度なアプリケーションへの道を切り開きます最小必要知识。
高度なアプリケーション セクションでは、Vite のさまざまな高度な使用法と建設パフォーマンスの最適化方法を学習し、完全な Vite プラグインの作成方法を学習し、運用環境を上手に解凍し、Vite を使用して複雑な SSR プロジェクトを構築し、クロスプラットフォームを実現します。モジュールフェデレーションに基づく統合 アプリケーションモジュールはアーキテクチャを共有します。プロジェクトのパフォーマンスの最適化スキルであっても、フロントエンドの基礎となる標準や仕様の理解であっても、このモジュールから多くの改善が得られます。
次に、 Vite のコア ソース コードを一緒に分析し、ソース コード内のJIT、Proxy Module、Module Graph、HMR Boundary、 などの重要な概念の役割と基礎となる実装を理解しPlugin Container、Vite のソース コードを段階的に読み解く方法を説明します。次のアーキテクチャ図の主要なリンク Vite 実装の原理を学びます。
最後は手書き戦闘編です。まず、開発中に Vite のバンドルなしサービス、つまり開発環境でブラウザのネイティブ ESM に基づく Dev Server を手書きします。次に、AST 解析の機能から始まり、コードの字句解析 (トークン化) と意味解析 (パース) を完了してモジュールを実現する、本番環境のパッケージング ツール (Bundler) を完成させるまでのステップごとに説明します。依存関係グラフとスコープ チェーン ツリー シェーキング、循環依存関係検出、バンドル コード生成を構築して完了し、最終的にロールアップと同様のバンドラーを実現します。
コースでは実戦を重視していることがわかります。コースのすべてのコードは Github ウェアハウス (ウェアハウスのアドレス)にアップロードされ、基本的にすべてのセクションに実行可能なコード ケースがあります。特に最後の章では、構築ツールの基本原理を理解していただくために、簡単な構築ツールを構築し、数千行のコードを手書きで実行する方法を段階的に説明します。実際のコードを操作することができます。
-vite))、基本的にすべてのセクションには、実行できるコード ケースがあります。特に最後の章では、構築ツールの基本原理を理解していただくために、簡単な構築ツールを構築し、数千行のコードを手書きで実行する方法を段階的に説明します。実際のコードを操作することができます。
最後に、一緒に Vite の実践的なポイントと実装原則を深く掘り下げ、フロントエンド エンジニアリング構築分野の根底にある景色を鑑賞し、初心者から上級者まで Vite を真に実現できれば幸いです。