面接--webpack

一般的なplugin

definePlugin

dllPlugin

webpack-analyzer-plugin

copyPlugin

HMR熱更新プロセス

webpackファイルシステムをwatchでメモリにパッケージ

devServerはwebSocketを介してブラウザ側ファイルの変更(ファイルhashが送信)

を通知する.

webpack-dev-server/clientは、サービス・エンド・メッセージから応答を受信する(ホット・アップデートが構成されていない場合は、ページを直接ブラシし、そうでない場合はwebacpkクライアント・コードに通知し、ホット・アップデートを行う)

.

webpackは、最新hash値検証を受信し、モジュールコード

を要求する.

HotModuleReplacement.runtimeモジュールの熱更新

トラフィックコード追加加熱更新後の処理関数

//   ：
// reducer    ，         
if (module.hot) {
  module.hot.accept('./reducers', () => {
    let reducer = require('./reducers').default;
    app.replaceReducer(reducer);
  });
  module.hot.accept('@talentui/bootstrap-react', () => {
    app.start();
  })
}

Webpackはフロントエンドのパフォーマンスを最適化する方法

Tree Shaking

tree shakingは、JavaScriptコンテキストから削除された参照されていないコード(dead-code)を記述するために一般的に使用される用語です.ES 2015モジュール構文の静的構造特性、例えばimportおよびexportに依存します.この用語と概念は実際にはES 2015モジュールパッケージツールrollupによって普及している.Webpack 2の正式バージョンには、ES 2015モジュール(harmony modulesとも呼ばれる)と未使用モジュール検出能力が内蔵されています.新しいwebpack 4の正式バージョンはこの検出能力を拡張し、packageを通過した.jsonの「sideEffects」属性をタグとしてcompilerに提示し、プロジェクト内のどのファイルが「pure(純粋なES 2015モジュール)」であるかを示すことで、ファイルの未使用部分を安全に削除することができます.
tree shakingを使うには以下に注意しなければなりませんが...

は、ES 2015モジュール構文(すなわち、importおよびexport)を使用する.

compilerがES 2015モジュール構文をCommonJSモジュールに変換していないことを確認します(これもポピュラーなBabel presetの@babel/preset-envのデフォルトの動作です-詳細はドキュメントを参照してください).

プロジェクトpackage.jsonファイルにsideEffectsプロパティを追加します.

modeオプションをproductionに設定することでminification(コード圧縮)とtree shakingを有効にします.

Code Spliting+永続化キャッシュ

Scope Hosting

コード圧縮混同

Webpack構築速度の向上方法

最新のwebpack

にアップグレード

dllまたはexternalを使用してベースライブラリを事前にパッケージ

excludeによるloader構成の最適化

resolveを最適化する.extensionsファイル名接尾辞構成インポートファイルは、できるだけ接尾辞名

を付ける
リファレンスリンク
リファレンス