Webpack の面接の質問 10 個、あなたは何個答えることができますか?-jsチュートリアル-php.cn

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

Webpack の面接の質問 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 に挿入し、サードパーティまたは共有リソースを静的に保存します。

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

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

: モジュールを自動的にロードし、置き換えますrequire と import
テンプレートに基づいて HTML コードを自動的に生成し、css ファイルと js ファイルを自動的に参照できます
js ファイルで参照されているスタイルを css ファイルに抽出します
コンパイル時にグローバル変数を構成します。これは、開発モードとリリースモードのビルドで異なる動作を許可する場合に非常に役立ちます。。
ホットアップデート
さまざまなコンポーネント内の重複した CSS をすぐに重複排除できます
インタラクティブにズーム可能なツリーマップの形式でバンドルファイルを表示する Webpack バンドルファイル分析ツール。
運用環境では、gzip を使用して JS と CSS を圧縮できます
: マルチプロセスを通じてコード構築を高速化しますモデル番号 ##clean-wenpack-plugin
speed-measure-webpack-plugin
webpack-bundle-analyzer

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

コンパイルオブジェクトは、リソースバージョン 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 メカニズムの原理

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