問題タブ [react-suspense]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - プログラムで最初のページ バンドル サイズを決定する
私のチームは を使用して Web アプリケーションを作成しcreate-react-appましたが、最初のページの読み込み時にバンドル サイズを小さく保ちたいと考えています。現在、出力された javascript ファイルを実行gzipして、バンドル全体のサイズを把握しています (の出力と同様)。最初のページ読み込みに必要です。wcbuild/react-scripts build
build/index.html今のところ、最初のページの読み込み時にどのチャンクが読み込まれるかを特定するために、どのスクリプトタグが絶対パスを参照しているかを解析して見つけることに頼ることを計画しています (サードパーティのスクリプトをカウントしないようにするため)。初期ペイントに重要な javascript 側をロードします。私はそうは思いませんが、CRA がどのように機能するかについても、はっきりと断言できるほどには理解していません。
私のチームメイトも、ヘッドレス ブラウザでランディング ページを読み込んで、ページの読み込み時にどのスクリプトが読み込まれたかを判断するだけでよいのではないかと考えています。
前もって感謝します！
reactjs - 反応遅延読み込みを使用すると Edge で SCRIPT1028 エラーが発生する
私のアプリは他のブラウザーでは動作しますが、(v44 では) 動作しません。遅延読み込みを削除すると、正常に動作します。
コードを分割するためにReact.lazyandを使用しています。Suspense
- バベル 7.5.0
- ウェブパック 4.28.3
- 反応16.7.0
webpackとbabel configをいじってみました。eval 内にある次のコードによってエラーがスローされているようです。それを殺しているのは拡散構文だと思います。ただし、これをwebpackコード自体としてbabelにes5にトランスパイルさせる方法がわかりません。
ウェブパック構成:
バベル設定
予想: 他のブラウザーと同じようにエッジで動作します
Actual: 遅延ロードをトリガーする何かに当たるとすぐに死ぬ
reactjs - React lazy/Suspense コード分割を使用してコンテンツの変更時に誤ったチャンクをダウンロードするのを webpack-dev-server に停止させるにはどうすればよいですか?
これが私のセットアップです：
webpack-dev-serverこれは、次の構成でによってロードされています。
今、私たちがレンダリングしていると想像してください
初期ロードでは、これは適切に機能します。MobileAppチャンクはダウンロードされますが、ダウンロードされませDesktopAppん。ただし、コンポーネント内のデータを変更してHMRキックするとすぐに、リロードによりDesktopAppチャンクがダウンロードされます。
これは明らかにコード分割の目的に反します。これが起こらないようにする方法を知っている人はいますか？
明確にするために：私は出力console.log(shouldServeMobile)しましたが、それは常にtrueです。また、私はここで提案を試みました: Webpack-dev-server は変更のたびにすべてのチャンクを発行しますが、まったく役に立ちませんでした。