問題タブ [code-splitting]

私のログイン ベースのアプリケーションでは、ログインしているユーザーのユーザー名を常に知る必要があります。(MVP) . したがって、URLからユーザー名を取得していますが、ログインが成功した後にページが開いたときに、URLからユーザー名を取得できません。存在しないように見えますが、そこにあります。リフレッシュ後にのみ機能します。次に、ユーザー名を取得できます。

URL は の形式http://127.0.0.1:8888/AdministrareBloc.html#AdminPlace:adminで、文字列を分割して管理部分のみを取得します。

これは、ユーザーを確認する前にコードをダウンロードするためだと思いました。そこで、次のようにコードに分割ポイントを配置しました:(正しく配置したかどうかはわかりません)

これは、ユーザーがログイン ボタンをクリックしたときに発生します。スプリットポイントは正しく配置されていますか？ログインに成功した後、ページを更新せずにユーザー名を取得するにはどうすればよいですか?

アップデート

私は今日、AdminViewImpl と UserViewImpl 内に Window.Location.reload() を配置するというトリックを試しました。アプリケーションが起動すると、ページが毎秒リロードされるため、分割ポイントが正しく使用されておらず、ブラウザーは実際に必要になる前にコードをダウンロードします。そのため、更新後にユーザー名を確認できます。コードが再ダウンロードされ、更新時に既にログインしているためです。

前もって感謝します

TL;DR: Webpack を使用したコード分割が必要な場合について説明していただけますか?bundle-loader

Backbone ベースのアプリを Require.js から Webpack に移行し始めたときrequire、ルーターに次のようなステートメントがあったことを覚えています。

必要なコードを残りのコードと同じバンドルに配置し、特定のルートに切り替えるときに動的に必要となる別のファイルを生成するために、次のbundle-loaderように を使用する必要がありました。

ここで、コードベースを ES6 モジュールに移行し、Webpack のドキュメントで説明さrequire.ensureれている構文を使用すると、次のようになります。

bundle-loader複数のチャンクを生成して動的にロードする必要があるかどうかはわかりません。そして、私がそうするなら、それはどのrequire呼び出しに行きますか —require.ensureまたはrequireコールバックの中ですか? それとも両方？それはすべてとても混乱しています。

「ユニバーサル」アプリ (react-router、redux、webpack - 主にhttps://github.com/erikras/react-redux-universal-hot-exampleに基づく) でコード分割の実装を開始しました。

コード分​​割が実装されている (唯一の) ルートで、ブラウザーを完全に更新すると、次の React エラー メッセージが表示されます。

コード分​​割を無効にすると、エラー メッセージは表示されなくなります。これは、Javascript チャンクが Webpack ローダーによって読み込まれる前に React が最初のレンダリングを行ったためであると推測しています。そのため、サーバーで生成されたものとは異なるマークアップが生成されます。あれは正しいですか？

• エラーメッセージについて心配する必要がありますか?
• このメッセージが発生した正確な時間に React が何をレンダリングするかを把握する方法はありますか?
• メッセージを消すための修正はありますか? (コード分割を使用しない以外)

webpack のチャンク メソッドを使用して、ルート構成の個別のルートに個別のバンドルを生成したいと考えています。これを実現する 1 つの方法は、require.ensure を使用してチャンクの分割ポイントを定義し、ブラウザの要求に応じて非同期的にモジュールをロードすることです。

ここに私が持っているものがあります：

webpack.config.js (実行された npm スクリプトに応じて、dev/prod webpack 構成とマージされます):

webpack.config.dev.js (dev webpack 構成 [上記とマージ]):

ルート.jsx :

ブログの投稿やチュートリアルのトーンを読みましたが、すべてここにあるようです。それでも、webpack は、require.ensure を使用するどちらのルートに対しても個別のバンドルを生成していません。

• スマートランディング都市
• SmartLandingCompanies
• 会社概要ページ

アプリ バンドルのサイズは 2 MB で、利用可能なすべてのサイズ縮小方法を既に使用しているため、すでに非常に必死です。

助けてくれてありがとう！

Webpack などのツールを使用すると、コード分割を有効にして、必要な場合にのみアプリケーション コードを非同期にロードできます。

反応ルーターを使用した反応アプリケーションのコンテキストでの例。

Webpack は、リクエストを開始するためにコードが必要になるまで待機します。

私の質問は、ベース アプリケーション コードが読み込まれたら、ユーザーが新しいルートへの移行を開始する前であっても、残りのコードの読み込みを開始できるかということです。

私の見解では、ユーザーが webpack チャンクのダウンロードを待つのを防ぐことができます。

これが理にかなっていることを願っています

typescript を使用して開発したアプリの複数のバンドルを作成し、オンデマンドでロードするために、webpack が提供するコード分割機能を使用したいと考えています。私はしばらくオンラインで解決策を探していましたが、見つけた最も近い答えはこれです: https://github.com/TypeStrong/ts-loader/blob/master/test/execution-tests/babel-codeSplitting /require.d.ts

この例は、公式の ts-loader ドキュメントから直接取得したものであり、分割ポイントを作成するために require.ensure に依存する方法を示しています。

私を悩ませているのは、タイプスクリプトでそれを行う簡単な方法がないことです。require.ensure 関数は typescript で直接呼び出す必要があります。次の宣言ファイルを指定して、typescript がその呼び出しを黙って消化できるようにする必要があります。

同じ結果を達成するためのよりエレガントな方法はありますか?

私は GWT でアプリを作成していますが、最近コード分割を実装しました。アプリケーションのサイズを 1.1MB から 570kB に減らしたので、アプリケーションの起動時間が速くなりました (私たちは 500kB が本当に重要な特別なサーバーを使用しています...私の質問には重要ではありません...)。アプリケーションの起動後 (つまり、ユーザーはログイン ページを表示し、ログインしてアプリの基本部分を使用できます)、残りのフラグメントをダウンロードしたいと思います。

フラグメント内のコードが必要なときにフラグメントがダウンロードされることはわかっています。しかし、フラグメントの 1 つは約 300kB です。そのため、アプリのメニューでアイテムをクリックすると、このフラグメントがダウンロードされ、ユーザーが応答を受け取るまでに非常に顕著な遅延 (1 - 2 秒) が発生します。

これはおそらく一度だけ発生する可能性が高く、フラグメントは1年ほどキャッシュされるため、次回はより速くロードされることがわかりました. ただし、たとえば、別のデバイスでもう一度試すと、フラグメントを初めてダウンロードする必要があります。

ユーザーがwifiを使用して電話/タブレットでアプリを起動した後、wifiから切断するか、その範囲外に出た場合でも、フラグメントでコードを起動できることを確認する必要があります。彼がまだサーバーに接続している間は、それらをダウンロードする原因となるものを起動しないでください。

今では、すべてのフラグメントをダウンロードするために 3 つのメニュー項目を開く必要があり、面倒です。

つまり
、最初のダウンロードは 570kB のままにし、アプリの残りの部分をできるだけ早くバックグラウンドで (可能であれば) ダウンロードしたいと考えています。

編集: http://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html#sequenceを見つけたので、最初の読み込みシーケンスを設定できるので、探しているものだと思います。ただし、フラグメントがダウンロードされた後にログイン画面が表示されるため、非同期でロードされるかどうかはわかりません。

outputFileSystem として memory-fs を使用する webpack 構成があり、ターゲットがノードであるとします。コードのどこかで、require.ensure を使用してコードを分割しています。この場合、モジュールを要求しようとすると、ディスク内でモジュールを見つけようとし、「モジュールが見つからないというエラー」がスローされます。私が望むのは、メモリ fs からも分割モジュールをロードする必要があることです。このケースに適合する適切なローダーまたはプラグインが見つかりませんでした。ということで、自作します。しかし、webpack プラグインとローダーのどちらが必要か判断できませんでした。

ありがとう