Webpack の面接の質問 10 個、あなたは何個答えることができますか?

この記事では、Webpack に関する面接の質問 10 個を紹介します。不足がないか確認して埋めてください。これら 10 個の面接の質問のうち、何問正しく答えることができますか?全部正解できますか？

面接の質問は単なる導入に過ぎません。質問を手早く仕上げることは、ただ暗記するだけです (面接官はあなたに質問しますが、あまり深く理解していない可能性があります) - Depth), 深く理解するにはまだ多くの努力が必要です ;

webpack の構築プロセスとは何ですか

• 初期化パラメータ: webpack 構成パラメータを解析し、シェルによって渡され、webpack.config.js ファイルで構成されたパラメータをマージして、最終的な構成結果を形成します。

• コンパイルの開始: 前のステップで取得したパラメーターを使用してコンパイラー オブジェクトを初期化し、構成されたすべてのプラグインを登録します。プラグインは Webpack ビルド ライフ サイクルのイベント ノードをリッスンします。それに応じて反応し、オブジェクトの run メソッドを実行してコンパイルを開始します;

• エントリを決定します: 構成されたエントリから、ファイルの解析を開始して AST を構築します構文ツリー、依存関係を見つけて再帰的に続行します;

• コンパイル モジュール: 再帰では、ファイル タイプとローダー構成に従って、構成されたすべてのローダーがファイルを変換するために呼び出されると、そのモジュールが依存するモジュールが見つかり、エントリに依存するすべてのファイルがこのステップで処理されるまでこのステップが再帰されます。

• モジュールのコンパイルと出力を完了する: 再帰が完了すると、各モジュールとそれらの間の依存関係を含む各ファイルの結果が取得され、エントリまたはサブコントラクト構成に基づいてコードが生成されます。ブロック チャンク;

• #出力完了: すべてのチャンクをファイル システムに出力します。

#Webpack のホット アップデート原則

実際、私は

Express アプリケーション

を開き、Webpack コンパイルの監視を追加し、ブラウザーとの長い WebSocket 接続を追加し、ファイル変更時に Webpack をトリガーしてコンパイルしました。完了後、これは、sokcet メッセージを通じてブラウザに を更新する準備をするように指示します。更新のコストを削減するために、 は Web ページを更新する必要はありません が、 特定のモジュールを更新します 、webpack-dev-server はホット アップデートをサポートし、それを比較することができます生成されたファイルのハッシュ値 更新が必要なモジュールの場合、ブラウザはホット リプレースを実行します。

サーバー

webpack-dev-server を起動します。サーバー

• Webpackインスタンスを作成します
• サーバーを作成しますserver
• Webpackのdoneイベントコールバックを追加します
• コンパイル完了後にクライアントにメッセージを送信します
• エクスプレス アプリケーション アプリの作成
• ファイル システムをメモリ ファイル システムに設定します
• webpack-dev-middleware ミドルウェアを追加します
• ミドルウェアは、生成されたファイルを返す役割を果たします。
• Webpack のコンパイルを開始します
• http サーバーを作成してサービスを開始します
• sockjs を使用してブラウザとサーバーの間に長い WebSocket 接続を確立します
• ソケット サーバー

クライアント

webpack-dev-server/client は、ok メッセージを受信した後、このハッシュ メッセージを監視します。 , クライアントは reloadApp メソッドを実行して update

• reloadApp ではホットアップデートに対応しているかどうかを判定し、サポートされている場合は webpackHotUpdate イベントが発生し、サポートされていない場合はブラウザが
• webpackHotUpdate イベントは webpack/hot/dev-server.js で監視されます
• module.hot.check メソッドは check メソッドで呼び出されます
• HotModuleReplacement.runtime リクエスト マニフェスト
• JsonpMainTemplate.runtime
• の hotDownloadManifest メソッドを呼び出して、JsonpMainTemplate を呼び出します。ランタイムの hotDownloadUpdateChunk メソッドは、JSONP リクエストを通じて最新のモジュール コードを取得します。 patch js が取得されるか、JsonpMainTemplate.runtime.js の webpackHotUpdate メソッドが呼び出されます。
• 次に、HotModuleReplacement.runtime.js の hotAddUpdateChunk メソッドが呼び出されます。モジュール コードを動的に更新します。
• 次に、hotApply メソッドを呼び出します。ホット アップデートの場合は
• #webpack パッケージ化によりハッシュ コードが生成されます
• 1. webpack エコシステムではハッシュを計算する方法が多数あります

hash

chunkhash

• contenthash
• ハッシュは、各 Webpack コンパイルで生成されるハッシュ値。このメソッドを使用するすべてのファイルは同じハッシュを持ちます。ビルドごとに、webpack が新しいハッシュを計算します。チャンクハッシュは、エントリ ファイルとそれに関連付けられたチャンクに基づいて形成されます。特定のファイルへの変更は、それに関連付けられたチャンクのハッシュ値にのみ影響しますが、ファイルのコンテンツに基づく他のファイルのコンテンツ ハッシュの作成には影響しません。ファイルのコンテンツが変更されると、コンテンツハッシュも変更されます
• 2。同じランダム値は避けてください<ul><li>webpack は、ハッシュを <code> 計算した後、チャンクを分割します。 これらのファイルは同じチャンクに属しているため、同じランダム値が生成される可能性があります。ファイルを独立したチャンクにメンションすることができます (エントリに入れるなど)

# #webpack offline 静的リソースをキャッシュする方法

webpack を構成するとき、html-webpack-plugin を使用してスクリプトを HTML に挿入し、サードパーティまたは共有リソースを静的に保存します。

ac601a84bdd9ec7b81aa524a2e2a51dc
• のように、タグを HTML に追加します。html-webpack-plugin では、HTML 属性を構成することでスクリプトを挿入できますUse webpack-manifest-plugin と webpack-manifest-plugin を設定して、js リソースの違いを比較し、それらを置き換えるかどうかを決定するためのマニフェスト json ファイルを生成します。もちろん、キャッシュ スクリプトも記述する必要があります
• Cl CD を使用する場合、ファイル ストリームを編集して静的スクリプトを挿入して、サーバーへの負荷を軽減し、パフォーマンスを向上させることもできます。
• カスタム プラグインや html-webpack-plugin などの定期的な関数を通じて動的に挿入できます。フロントエンドの静的ストレージ スクリプト

webpack 一般的なプラグインとは

ProvidePlugin
• : モジュールを自動的にロードし、置き換えますrequire と import
html-webpack-plugin
• テンプレートに基づいて HTML コードを自動的に生成し、css ファイルと js ファイルを自動的に参照できます
extract-text- webpack-plugin
• js ファイルで参照されているスタイルを css ファイルに抽出します
DefinePlugin
• コンパイル時にグローバル変数を構成します。これは、開発モードとリリース モードのビルドで異なる動作を許可する場合に非常に役立ちます。 。
HotModuleReplacementPlugin
• ホット アップデート
optimize-css-assets-webpack-plugin
• さまざまなコンポーネント内の重複した CSS をすぐに重複排除できます
webpack-bundle-analyzer
• インタラクティブにズーム可能なツリーマップの形式でバンドル ファイルを表示する Webpack バンドル ファイル分析ツール。
compression-webpack-plugin
• 運用環境では、gzip を使用して JS と CSS を圧縮できます
happypack
• : マルチプロセスを通じてコード構築を高速化しますモデル番号 ##clean-wenpack-plugin
各パッケージの下の未使用ファイルをクリーンアップします
• speed-measure-webpack-plugin
: U まで確認できます。 each 各ローダーとプラグインの実行時間 (パッケージ全体の時間、各プラグインとローダーの時間)
• webpack-bundle-analyzer
: Webpack 出力ファイルの量を視覚化(ビジネス コンポーネント 、サードパーティ モジュールに依存する
webpack プラグインの実装方法

webpack の本質はイベント ストリーミング メカニズムです、コア モジュール: tabable (同期非同期) フック コンストラクト === コンパイラー (コンパイル) コンパイル (バンドルの作成)

コンパイラー オブジェクトは完全な Webpack 環境構成を表します。このオブジェクトは Webpack の開始時に 1 回作成され、すべての操作可能な設定が構成されています。オプション、ローダー、プラグインを含みます。Webpack 環境でプラグインを適用すると、プラグインはこのコンパイラ オブジェクトへの参照を受け取ります。これを使用して webpack のメイン環境にアクセスできます
• コンパイル オブジェクトは、リソース バージョン build を表します。Webpack 開発環境ミドルウェアを実行するとき、ファイルの変更が検出されるたびに、新しいコンパイルが作成され、新しいコンパイル済みリソースが生成されます。コンパイル オブジェクトは、現在のモジュール リソースを表します、コンパイルされたリソース、変更されたリソース、ファイル、および追跡された依存関係のステータスに関する情報。また、コンパイル オブジェクトは、プラグインがカスタム処理を実行するときに選択できる多くの重要なタイミング コールバックも提供します。関数内でそのプロトタイプに apply メソッドを定義し、webpack 自体のイベント フックを指定します。
• 関数は webpack の内部インスタンスの特定のデータを内部で処理します。
• 処理が完了したら、 webpack によって提供されるコールバック関数

• function MyWebpackPlugin()(
  }；
  // prototype 上定义 apply 方法
  MyWebpackPlugin.prototype.apply=function(){
  // 指定一个事件函数挂载到webpack
  compiler.pluginCwebpacksEventHook"funcion (compiler)( console. log(“这是一个插件”)；
  // 功能完成调用后webpack提供的回调函数
  callback()
  })

• webpack で一般的に使用されるローダーは何ですか

file-loader: 出力ファイルをフォルダーにコピーし、コード内の相対 URL を通じて出力を参照します。 File

• url-loader: file-loader と似ていますが、ファイルのコンテンツをコードに挿入できます。
• source-map-loader: ブレークポイントのデバッグを容易にするために追加のソース マップ ファイルをロードします
• image-loader : 画像ファイルの読み込みと圧縮
• babel-loader: ES6 を ES5 に変換
• css-loader: CSS の読み込み、モジュール化のサポートなどの機能圧縮およびファイルとしてインポート
• style-loader: CSS コードを JavaScript に挿入し、DOM 操作を通じて CSS を読み込みます。
• eslint-loader: ESLint を介して JavaScript コードを確認する

Webpack による永続キャッシュの実装方法

• ##サーバーは http キャッシュ ヘッダーを設定します(cache-control)
依存関係とランタイムを別のチャンクにパッケージ化します。
• つまり、それらはほとんど変更されないため、splitChunk として設定されます
• 遅延ロード: import() メソッドを使用すると、動的にロードされたファイルを独立したチャンクに分割して、独自のチャンクハッシュを取得できます
• Keepハッシュ値の安定した: コンパイル プロセスとファイルの相互通信の変更は、他のファイルのハッシュの計算に影響を及ぼさないようにする必要があります。以前のバージョンの webpack によって生成される増分デジタル ID の不安定な問題については、 hashedModuleIdsPlugin を使用して生成できます。

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

webpack を使用してフロントエンドのパフォーマンスを最適化するということは、最終的にパッケージ化された結果がブラウザーで迅速かつ効率的に実行されるように、webpack の出力を最適化することを意味します。

• コードを圧縮: 冗長なコード、コメントを削除し、コードの記述を簡素化します。 Webpack の UglifyJsPlugin と ParallelUglifyPlugin を使用して JS ファイルを圧縮し、cssnano (css-loader?minimize) を使用して css を圧縮できます
• CDN を使用して高速化します: ビルド プロセス中に、css ファイル使用される静的リソース パスを CDN 上の対応するパスに変更します。 Webpack の出力パラメーターと各ローダーの publicPath パラメーターを使用して、リソース パスを変更できます。
• ツリー シェイキング: コード内に表示されないセグメントを削除します。これを実現するには、Webpack の開始時にパラメーター --optimize-minimize を追加します。
• コード分割: ルーティングの次元またはコンポーネントに従ってコードをチャンクに分割し、ロードできるようにします同時に、ブラウザ キャッシュを最大限に活用することもできます
• : パブリック サードパーティ ライブラリを抽出します: SplitChunksPlugin プラグインを使用してパブリック モジュールを抽出します。パブリック コード

Webpack TreeShaking メカニズムの原理

treeShaking とも呼ばれます。
• ツリーシェイキング最適化。これは、より多くのコードを除いて、パッケージ化ボリュームを最適化するために移動する方法であり、運用環境 ではデフォルトで有効になっています。 コードが実行されていない場合でも、
不要なコード
• を解析できます; #es6モジュールを使用します 仕様
• ES6 モジュールは 静的分析 のために導入されているため、
  コンパイル中にどのモジュールがロードされるかを正確に決定します
  • プログラム フローを静的に分析し、どのモジュールがモジュールと変数は使用または参照されず、対応するコードは削除されます
  • #元のアドレス: https://juejin.cn/post/7002839760792190989
著者: Front-end_Maverick_to Rhino

関連チュートリアルの推奨事項: 「

Webpack 入門ビデオ チュートリアル

」

以上がWebpack の面接の質問 10 個、あなたは何個答えることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。