問題タブ [code-splitting-async]

にアクセスしようとすると、エラーが発生し/article/post...ます。エラーが発生すると思われる Routes.js のコードのスニペットを次に示します。完全なエラー スタック トレースはhttps://pastebin.com/M0pCULPjにあります。完全なリポジトリはhttps://github.com/ElAnonimo/webpack4_2にあります。適切にレンダリングするために Article.js に欠けているものは何ですか?

Routes.js :

Article.js :

私はcreate-react-appを使用しています。ルーターの基本コード分割に反応したいが、ユーザーがブラウザーで開いた最初のチャンクを取得し、バックグラウンドで非同期に他のチャンクを取得したい

ルート

ユーザーがブラウザで /home を開いた場合、最初のチャンクをロードした後、最初にホーム チャンクがロードされ、バックグラウンドで非同期に他のチャンクを呼び出します。

必要な出力

1. /homeブラウザで開く
2. 最初にホーム チャンクを取得する
3. その後、バックグラウンドで非同期に他の 3 つのチャンク

実際には、lighthouse chrome extensionを使用してパフォーマンスをテストしています。ルーターベースのコード分割により、最初のページのパフォーマンスは良好ですが、2番目のページを開くと時間がかかりますが、時間はかかりません. 最初のチャンクをロードした後、バックグラウンドで他のチャンクを非同期にすれば可能だと思います

Normally in Laravel Mix, we can extract all vendors automatically using mix.extract() or extract a list of vendors using mix.extract(['vue','lodash','axios']). Is there a way to extract all vendors except a few?

For example, I load Pusher, Echo, Chart.js, etc. when they're needed importing dynamic chunks. However, they're still getting added to my vendor.js file.

Also, when extracting a list of specific vendors, I end up with about 20 extra chunks due to sharing common code with names like vendors~js/mychunk1~js/mychunk2~js/mychunk3.