[編集と共有] Webpack インタビューの質問の一部 (回答分析付き)

Webpack についての理解を話してください

1.Webpack とは何ですか?

webpack は静的モジュール パッケージャーです。webpack はアプリケーションを処理するときに、アプリケーションが必要とするすべてのモジュールを含む依存関係グラフを再帰的に構築し、これらのモジュールを 1 つまたは複数のバンドルにパッケージ化します。

Webpack は生産ラインのようなもので、ソース ファイルを出力結果に変換する前に、一連の処理プロセス (ローダー) を通過する必要があります。この生産ラインの各処理工程は単一の責任を持ち、複数の工程間には依存関係があり、現在の処理が完了して初めて次の工程に引き継がれて処理されます。
プラグインは、生産ラインに挿入される機能のようなもので、特定の時間に生産ライン上のリソースを処理します。 Webpack は実行プロセス中にイベントをブロードキャストします。プラグインは対象のイベントをリッスンするだけでよく、生産ラインに参加して生産ラインの動作を変更できます。

2. パッケージング プロセス/構築プロセスについて話していただけますか
#3. フロントエンド操作の最適化について話していただけますか

パッケージング プロセス/パッケージング原理/ Webpackのビルド手順は？

# webpack の実行プロセスはシリアルプロセスであり、そのワークフローはさまざまなプラグインを直列に接続することになります。

コマンドラインの実行npx webpackパッケージ化コマンドの開始
1.コンパイルパラメータの初期化:設定ファイルとシェルコマンドからパラメータを読み取ってマージします
2. コンパイルの開始: 前の手順で取得したパラメータに従って Compiler オブジェクトを初期化し、設定されているすべてのプラグインをロードし、オブジェクトの run メソッドを実行してコンパイルを開始します。
3.エントリを決定します: 設定内のエントリに従ってすべてのエントリ ファイルを検索します
4.モジュールをコンパイルします: エントリ ファイルからトリガーし、設定されているすべてのローダーを呼び出しますペア モジュールが変換され、そのモジュールが依存するモジュールが検出され、すべてのエントリ依存ファイルが変換されるまでこのステップが再帰されます。
5.モジュールのコンパイルを完了する: ステップ 4 でローダーを使用してすべてのモジュールを翻訳した後、各モジュールの最終的に翻訳されたコンテンツとモジュール間の依存関係グラフが取得されます。
6.出力リソース: 依存関係グラフに従って、複数のモジュールを含むチャンクをアセンブルし、各チャンクを別個のファイルに変換して出力リストに追加し、構成に従って出力を決定します。パスとファイル名が出力されます。

上記のプロセスでは、Webpack は特定の時点で特定のイベントをブロードキャストし、プラグインは対象のイベントをリッスンした後に特定のロジックを実行します。

概要

• 初期化: 設定ファイルとシェルコマンドからパラメータを読み取ってマージし、パラメータに従ってコンパイラインスタンスを初期化し、プラグインをロードします(設定されているすべてのプラグインを登録します)。で)、Compiler インスタンスの run メソッドを呼び出してコンパイルを開始します。

コンパイラ コンパイル オブジェクトは、Webpack のライフ サイクルを制御し、特定のタスクを実行せず、一部のスケジュール作業のみを実行します。たとえば、モジュールの作成、依存関係の収集、チャンキング、パッケージ化などを実行します。
run を呼び出した後、Compiltation インスタンスが作成されます。各ビルドでは、ビルドの基本情報を含む新しい Compiltation インスタンスが作成されます
Webpack 特定のイベントが特定の時点でブロードキャストされ、プラグインは対象のイベントをリッスンした後に特定のロジックを実行します。

• コンパイル: エントリからトリガーされ、各モジュールは対応するローダーに連続して呼び出され、モジュールを変換します。その後、モジュールが依存するモジュールが検索され、再帰的にコンパイルされます。

ファイルの解析を開始して、構成ファイル (webpack.config.js) で指定されたエントリから AST 構文ツリーを構築します。

• によるとグラフは複数のモジュールを含むチャンクに組み立てられ、各チャンクは出力用のファイルに変換されます。

異なるエントリは異なるチャンクを生成し、動的インポートも独自のチャンクを生成します

におけるローダーの役割Webpack/ローダーとは何ですか?

Loader は webpack は複数のファイル形式を処理するメカニズムを提供します、webpack は JS と JSON のみを認識するため、Loader はトランスレータと同等であり、他の種類のリソースを変換します 前処理を実行します。
モジュールの「ソースコード」を変換するために使用されます。
ローダーはチェーン呼び出しをサポートしており、呼び出しの順序は右から左です。 **チェーン内の各ローダーは、以前に処理されたリソースを処理し、最終的には JS コードになります。
ローダーの前処理関数を通じて、JavaScript エコシステムにさらに多くの機能を提供できます。

一般的なローダーとは何ですか?

• less-loader: より少ないファイルを CSS ファイルにコンパイルします

開発中、CSS スタイルを記述するためにより少ないプリプロセッサを使用することがよくあります。効率＃＃＃

• css-loader: css ファイルを commonjs モジュールに変換し、js にロードします。モジュールの内容はスタイル文字列です。
• style-loader: スタイル タグを作成してロードします。 js のスタイル リソースをタグに挿入し、タグを head に追加して有効にします
• ts-loader: Typescript ファイルをパッケージ化してコンパイルします

プラグインは何をするものですか? /プラグインとは

プラグインはより強力であり、その主な目的は、パッケージ化の最適化やコード圧縮など、ローダーでは達成できないことを解決することです。
プラグインがロードされると、プラグインによって定義された関数が webpack ビルドの特定の時点でトリガーされ、webpack が何かを行うのを支援します。 Webpack に機能拡張を実装します。

一般的なプラグインとは

• html-webpack-plugin は HTML リソースを処理し、デフォルトで空の HTML を作成します。パッケージ化された出力のすべてのリソース (js/css)
• mini-css-extract-plugin パッケージ化された CSS は js ファイル内にあります。このプラグインは CSS を個別に抽出できます
• clean -webpack -plugin パッケージ化するたびに、CleanWebpackPlugin プラグインは最後のパッケージを自動的に削除します。

Webpackプラグイン？

Webpack のローダーとプラグインの違い

常に言ってください
Webpack は生産ラインのようなもので、一連の処理を経る 処理（ローダ）を経て初めてソースファイルを出力結果に変換することができます。この生産ラインの各処理工程は単一の責任を持ち、複数の工程間には依存関係があり、現在の処理が完了して初めて次の工程に引き継がれて処理されます。
プラグインは、生産ラインに挿入される機能のようなもので、特定の時間に生産ライン上のリソースを処理します。 Webpack は動作中にイベントをブロードキャストします。プラグインは関心のあるイベントをリッスンするだけでよく、生産ラインに参加して生産ラインの動作を変更できます。

または、前の概要を使用して、それぞれローダーとプラグインについて説明します。

実行タイミング
1. ローダーはコンパイルで実行されます。フェーズ
2. プラグインはサイクル全体を通して機能します

使用方法
ローダー: 1. ダウンロード 2. 使用
プラグイン: 1.ダウンロード 2 .引用 3.

#Webpack を使用してどのような最適化方法が行われていますか?どのような最適化手法があるのでしょうか?

Webpack を使用してフロントエンドのパフォーマンスを最適化するにはどうすればよいですか?質問は実稼働環境の最適化に関するものです
webpack のビルド速度を向上させるにはどうすればよいですか?質問はビルド速度の最適化に関するものです

tree-shaking 未使用のコードを削除してフロントエンドのパフォーマンスを最適化し、ビルド速度を向上させます

tree-シェイクとは ES モジュールの仕様に基づいたデッドコード除去技術のパッケージングの一種で、パッケージング処理中にプロジェクト内で参照されていないモジュールを検出してマークを付け、参照されていないモジュールを削除することで、プロジェクトの実装効率を向上させます。ビルド速度が向上し、プログラムの実行時間が短縮されます。

ツリーシェイキングを使用する際に注意すべき点は何ですか?

1. デフォルトの mode =production、tree-shaking 関数は実稼働環境ではデフォルトで有効になっています。
2. モジュール コードは ES6 仕様を使用して記述する必要があります。ES6 モジュールの依存関係は決定的であり、実行時のステータスとは関係ありません。
3. 副作用のあるコードは記述しないようにしてください。たとえば、即時実行関数を作成したり、関数内で外部変数を使用したりしたとします。

副作用について

Webpack を使用してフロントエンドのパフォーマンスを最適化するにはどうすればよいですか?

• コード圧縮

オンデマンド読み込み

• コード分割 SplitChunks - 最適化構成内item 設定

1.node__mudules のコードを個別にチャンク出力にパッケージ化できます (たとえば、jqury を使用しますか?)
2. 共通のものがあるかどうかを自動的に分析します。マルチエントリ チャンク内のファイル ファイルがある場合は、別のチャンクにパッケージ化され、繰り返しパッケージ化されません

#サブパッケージ化には Dll を使用します

通常の状況では、node_module はファイルにパッケージ化されます。

dll テクノロジを使用して、頻繁に更新されないフレームワークとライブラリを個別にパッケージ化し、チャンクを生成します。

ルーティングを使用します。遅延ロードへ

コード内の import() 関数によって参照されるすべてのモジュールは、別のパッケージにパックされ、チャンクが保存されているディレクトリに配置されます。ブラウザーがこのコード行を実行すると、自動的にこのリソースが要求され、非同期読み込みが実装されます。

#Webpack は圧縮コードをどのように構成しますか?圧縮とは何ですか?

1. 最適化設定項目でプラグインを圧縮用のコンプレッサーとして設定します。

2. プラグインでの圧縮にはこのプラグインを使用します

js 圧縮: terser-webpack-plugin を使用します
css 圧縮: optimize-css-assets を使用します-webpack-plugin プラグイン

コンソール、コメント、スペース、改行、未使用の CSS コードなどを削除しました。

Webpack のビルド速度を向上させるにはどうすればよいですか?

アイデア 1: ビルドする必要があるファイルまたはコードを削減する

• HMR (ホット モジュール交換) モジュールのホット交換では、変更されたモジュールのみが開発環境で再構築されます。
• 処理範囲を狭める: 次の 2 つの属性を合理的に使用して、除外する: 処理する必要のないファイルと含める: 処理する必要があるファイル
• バベル キャッシュが構築される場合2 回目は以前のキャッシュが読み取られ、変更されたファイルのみが再構築されます
• サブパッケージ化に DLL を使用 -->サブパッケージ化はオンデマンド読み込みに便利です

通常、node_module はファイルにパッケージ化されます
dll テクノロジーを使用すると、頻繁に更新されないフレームワークとライブラリを個別にパッケージ化してチャンクを生成できます
プロジェクトのソース コードも分割する必要があり、パッケージ化されたファイルはルーティングに応じて分割する --> ルーティングの遅延読み込みを実装するにはどうすればよいですか? Webpack でコンポーネントの非同期読み込みを実装するにはどうすればよいですか?

アイデア 2: 複数のプロセスで構築する

• スレッドローダーを複数のプロセスにパッケージ化し、時間のかかるローダーの前に配置します

プロセスの起動とプロセスの通信にはオーバーヘッドがあり、作業時間が比較的長いため、マルチプロセスのパッケージ化が必要です

[関連する推奨事項: javascript ビデオ チュートリアル , プログラミングビデオ]

以上が[編集と共有] Webpack インタビューの質問の一部 (回答分析付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。