質問

以前の調査

webpack の wiki にあるように、analyse ツールを使ってビルドのパフォーマンスを最適化することは可能です。

からです。 https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

ビルド統計からのヒント

このページには 解析ツール があり、ビルドを視覚化し、また を提供します。 ビルドサイズとビルドパフォーマンスを最適化するためのヒントがあります。 .

必要な JSON ファイルは、webpack --profile を実行することで生成できます。 --json > stats.json

統計ファイルを生成して ( ここで利用可能 ) を webpack の analize ツールにアップロードしました。

で、その下に ヒント タブ prefetchPluginを使用するように伝えました。

からの http://webpack.github.io/analyse/#hints

長いモジュールビルドチェーン

プリフェッチを使う を使うことで、ビルドのパフォーマンスを上げることができます。 モジュールのプリフェッチは チェーンの真ん中 .

prefechPluginのドキュメントはこれしかないと思い、Webを隅々まで掘り返してみました。

からです。 https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

通常のモジュールへのリクエストで、そのモジュールへの require が発生する前に解決され、ビルドされます。 への要求が発生する前に解決され、ビルドされます。これはパフォーマンスを上げることができます。 をプロファイリングしてみてください。 ビルドを最初にプロファイルして、賢いプリフェッチポイントを決定します。 .

私の質問

• prefetchPlugin の正しい使い方は？
• Analyse ツールで使用するための正しいワークフローは?
• prefetchPlugin が機能しているかどうかを知るにはどうすればよいですか？ どのように測定すればよいですか？
• にはどのような意味があるのでしょうか？ チェーンの途中からモジュールをプリフェッチする ?

私は本当にいくつかの例を感謝します

この質問が、次にprefechPluginとAnalyseツールを使いたい開発者のための貴重なリソースとなるよう、ご協力をお願いします。 ありがとうございます。

どのように解決するのですか？

プリフェッチプラグインのドキュメントはほとんど存在しません。 自分自身でそれを把握した後、その使用は非常にシンプルで、それに対する柔軟性はあまりありません。 基本的に、それは 2 つの引数を取ります。コンテキスト (オプション) とモジュール パス (コンテキストからの相対パス) です。 あなたの場合、コンテキストは /absolute/path/to/your/project/node_modules/react-transform-har/ であると仮定すると、スクリーンショットのチルダが指しているのは node_modules を指していると仮定すると、webpack の node_module resolution .

実際のプリフェッチモジュールは、理想的にはモジュール依存性が3つ以下であるべきです。 ですから、あなたの場合 isFunction.js は長いビルドチェインを持つモジュールであり、理想的なプリフェッチは getNative.js

しかし、ビルドチェーンの依存関係がモジュールの依存関係を参照しているため、設定に何かおかしな点があるのではないかと思います。これは webpack によって自動的に最適化されるはずです。 なぜそうなったのかわかりませんが、私たちの場合、node_modules に長いビルドチェーンに関する警告は表示されません。 私たちの長いビルドチェーンのほとんどは、scssを必要とする深くネストされたreactコンポーネントによるものです。

ともあれ、このように警告ごとに新しいプラグインを追加することになります。

plugins: [
    new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
    new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];

第2引数には、モジュールの相対的な位置を表す文字列を指定する必要があります。 これが意味を持つことを願っています。