ホームページ >ウェブフロントエンド >jsチュートリアル >[編集と共有] Webpack インタビューの質問の一部 (回答分析付き)
1.Webpack とは何ですか?
webpack は静的モジュール パッケージャーです。webpack はアプリケーションを処理するときに、アプリケーションが必要とするすべてのモジュールを含む依存関係グラフを再帰的に構築し、これらのモジュールを 1 つまたは複数のバンドルにパッケージ化します。
Webpack は生産ラインのようなもので、ソース ファイルを出力結果に変換する前に、一連の処理プロセス (ローダー) を通過する必要があります。この生産ラインの各処理工程は単一の責任を持ち、複数の工程間には依存関係があり、現在の処理が完了して初めて次の工程に引き継がれて処理されます。
プラグインは、生産ラインに挿入される機能のようなもので、特定の時間に生産ライン上のリソースを処理します。 Webpack は実行プロセス中にイベントをブロードキャストします。プラグインは対象のイベントをリッスンするだけでよく、生産ラインに参加して生産ラインの動作を変更できます。
2. パッケージング プロセス/構築プロセスについて話していただけますか
#3. フロントエンド操作の最適化について話していただけますか
# webpack の実行プロセスはシリアルプロセスであり、そのワークフローはさまざまなプラグインを直列に接続することになります。
コマンドラインの実行npx webpack
パッケージ化コマンドの開始
1.コンパイルパラメータの初期化
:設定ファイルとシェルコマンドからパラメータを読み取ってマージします
2. コンパイルの開始
: 前の手順で取得したパラメータに従って Compiler オブジェクトを初期化し、設定されているすべてのプラグインをロードし、オブジェクトの run メソッドを実行してコンパイルを開始します。
3.エントリを決定します
: 設定内のエントリに従ってすべてのエントリ ファイルを検索します
4.モジュールをコンパイルします
: エントリ ファイルからトリガーし、設定されているすべてのローダーを呼び出しますペア モジュールが変換され、そのモジュールが依存するモジュールが検出され、すべてのエントリ依存ファイルが変換されるまでこのステップが再帰されます。
5.モジュールのコンパイルを完了する
: ステップ 4 でローダーを使用してすべてのモジュールを翻訳した後、各モジュールの最終的に翻訳されたコンテンツとモジュール間の依存関係グラフが取得されます。
6.出力リソース
: 依存関係グラフに従って、複数のモジュールを含むチャンクをアセンブルし、各チャンクを別個のファイルに変換して出力リストに追加し、構成に従って出力を決定します。パスとファイル名が出力されます。
上記のプロセスでは、Webpack
は特定の時点で特定のイベントをブロードキャストし、プラグインは対象のイベントをリッスンした後に特定のロジックを実行します。
概要
コンパイラ コンパイル オブジェクトは、Webpack のライフ サイクルを制御し、特定のタスクを実行せず、一部のスケジュール作業のみを実行します。たとえば、モジュールの作成、依存関係の収集、チャンキング、パッケージ化などを実行します。
run を呼び出した後、Compiltation インスタンスが作成されます。各ビルドでは、ビルドの基本情報を含む新しい Compiltation インスタンスが作成されますWebpack
特定のイベントが特定の時点でブロードキャストされ、プラグインは対象のイベントをリッスンした後に特定のロジックを実行します。
ファイルの解析を開始して、構成ファイル (webpack.config.js) で指定されたエントリから AST 構文ツリーを構築します。
異なるエントリは異なるチャンクを生成し、動的インポートも独自のチャンクを生成します
Loader は webpack は複数のファイル形式を処理するメカニズムを提供します、webpack は JS と JSON のみを認識するため、Loader はトランスレータと同等であり、他の種類のリソースを変換します 前処理を実行します。
モジュールの「ソースコード」を変換するために使用されます。
ローダーはチェーン呼び出しをサポートしており、呼び出しの順序は右から左です。 **チェーン内の各ローダーは、以前に処理されたリソースを処理し、最終的には JS コードになります。
ローダーの前処理関数を通じて、JavaScript エコシステムにさらに多くの機能を提供できます。
開発中、CSS スタイルを記述するためにより少ないプリプロセッサを使用することがよくあります。効率###
プラグインはより強力であり、その主な目的は、パッケージ化の最適化やコード圧縮など、ローダーでは達成できないことを解決することです。
プラグインがロードされると、プラグインによって定義された関数が webpack ビルドの特定の時点でトリガーされ、webpack が何かを行うのを支援します。 Webpack に機能拡張を実装します。
常に言ってください
Webpack は生産ラインのようなもので、一連の処理を経る 処理(ローダ)を経て初めてソースファイルを出力結果に変換することができます。この生産ラインの各処理工程は単一の責任を持ち、複数の工程間には依存関係があり、現在の処理が完了して初めて次の工程に引き継がれて処理されます。
プラグインは、生産ラインに挿入される機能のようなもので、特定の時間に生産ライン上のリソースを処理します。 Webpack は動作中にイベントをブロードキャストします。プラグインは関心のあるイベントをリッスンするだけでよく、生産ラインに参加して生産ラインの動作を変更できます。
または、前の概要を使用して、それぞれローダーとプラグインについて説明します。
実行タイミング
1. ローダーはコンパイルで実行されます。フェーズ
2. プラグインはサイクル全体を通して機能します
使用方法
ローダー: 1. ダウンロード 2. 使用
プラグイン: 1.ダウンロード 2 .引用 3.
Webpack を使用してフロントエンドのパフォーマンスを最適化するにはどうすればよいですか?質問は実稼働環境の最適化に関するものです
webpack のビルド速度を向上させるにはどうすればよいですか?質問はビルド速度の最適化に関するものです
tree-シェイクとは ES モジュールの仕様に基づいたデッドコード除去技術のパッケージングの一種で、パッケージング処理中にプロジェクト内で参照されていないモジュールを検出してマークを付け、参照されていないモジュールを削除することで、プロジェクトの実装効率を向上させます。ビルド速度が向上し、プログラムの実行時間が短縮されます。
1. デフォルトの mode =production
、tree-shaking
関数は実稼働環境ではデフォルトで有効になっています。
2. モジュール コードは ES6 仕様を使用して記述する必要があります。ES6 モジュールの依存関係は決定的であり、実行時のステータスとは関係ありません。
3. 副作用のあるコードは記述しないようにしてください。たとえば、即時実行関数を作成したり、関数内で外部変数を使用したりしたとします。
オンデマンド読み込み
1.node__mudules のコードを個別にチャンク出力にパッケージ化できます (たとえば、jqury を使用しますか?)
2. 共通のものがあるかどうかを自動的に分析します。マルチエントリ チャンク内のファイル ファイルがある場合は、別のチャンクにパッケージ化され、繰り返しパッケージ化されません
通常の状況では、node_module はファイルにパッケージ化されます。dll テクノロジを使用して、頻繁に更新されないフレームワークとライブラリを個別にパッケージ化し、チャンクを生成します。
コード内の import() 関数によって参照されるすべてのモジュールは、別のパッケージにパックされ、チャンクが保存されているディレクトリに配置されます。ブラウザーがこのコード行を実行すると、自動的にこのリソースが要求され、非同期読み込みが実装されます。
2. プラグインでの圧縮にはこのプラグインを使用します
js 圧縮: terser-webpack-plugin を使用します
css 圧縮: optimize-css-assets を使用します-webpack-plugin プラグイン
アイデア 1: ビルドする必要があるファイルまたはコードを削減する
通常、node_module はファイルにパッケージ化されます
dll テクノロジーを使用すると、頻繁に更新されないフレームワークとライブラリを個別にパッケージ化してチャンクを生成できます
プロジェクトのソース コードも分割する必要があり、パッケージ化されたファイルはルーティングに応じて分割する --> ルーティングの遅延読み込みを実装するにはどうすればよいですか? Webpack でコンポーネントの非同期読み込みを実装するにはどうすればよいですか?
アイデア 2: 複数のプロセスで構築する
プロセスの起動とプロセスの通信にはオーバーヘッドがあり、作業時間が比較的長いため、マルチプロセスのパッケージ化が必要です
[関連する推奨事項: javascript ビデオ チュートリアル , プログラミングビデオ]
以上が[編集と共有] Webpack インタビューの質問の一部 (回答分析付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。