問題タブ [code-splitting]

ユーザーがサイトを閲覧するときに、モデルを遅延ロードするために、既存のノックアウト ベースの SPA フレームワークで webpack を使用することを検討しています。

私は以下のスレッドを見ていた Webpackで個々のSPAバンドルを作成する

受け入れられた答えは、私が達成しようとしているものと非常に似ているように見えました。基本的に、各 SPA ページは、サーバーから JSON 形式で返されるコンポーネントのコレクションで構成されます。

クライアントは、これらのコンポーネントを個々の js モデルにマップします。現在、これらの js モデルはすべて 1 つの大きなファイルにまとめられており、サイトが最初にレンダリングされるときにクライアントに提供されます。

これらのコンポーネントを (require および require.ensure を介して) チャンクに分割し、webpack を使用してオンデマンドでロードされるようにしたいと考えています。

そのため、上記のスレッドから提案されたソリューションをいじってみましたが、うまくいきました。また、webpack.config.js にルート ディレクティブを追加しました。

相対パスを指定せずにモジュールを要求できるようにします (各モデルは models/components ディレクトリ内の js モジュールにあります)

今私が遭遇した問題は、すべてのrequireをswitchステートメントからPromiseを返す関数に抽出しようとしたことです。これは既存の実装でうまく機能します

だから代わりに

に変更しました

ただし、webpack を実行した後、上記は惨めに失敗します。処理するモジュールの数が驚くほど多くなり、多くの例外が吐き出されるため、無限ループに陥っているようです。これは loadModule 関数が原因であると確信しています。大丈夫

何か案は？ありがとう

gulp を使用していますが、コード分割の機能があるかどうかを知りたいです。ここでwebpack サイトで言及されているものに似たもの。私はオンラインで見ましたが、それに特化したものは見当たりませんでした.

次のようなアプリ構造があります。

そして、アプリを次のようなコードに分割したいと思います。

webpackでこれを行う方法の例が見つからないようです。それで2問。これはできますか？そして、どうすればこれを行うことができますか？

リードやヘルプをいただければ幸いです。私はこれを午前中ずっと研究してきました。

Angular のドキュメントではhereが提案されていますが、私が見つけることができる例やチュートリアルはありません。それは可能ですが、誰もそれを行う方法を知りませんか?.

ここでwebpack構成を見つけることができます

私の現在のルートの説明は、ルートの 1 つについて次のようになります。

ルート パスのコードを分割するために、コードは次のようになると思います。

しかし、私が見逃しているのは OnEnter checkAuth 関数です。どうすればそれを含めることができますか?

私は require.ensure を使用して、react-routerパスに分割ポイントを作成しています。ただし、私のビルド ディレクトリapp.jsには、vendor.js. 使用したパスごとに個別の js ファイルを期待していましたrequire.ensure。

私はrequire.ensure次のように各パスで使用しました：

ビルド用の私の Web パック構成出力は次のようになります。

以下は、ルート ファイルとwebpack 構成ファイルの要点全体です。

更新： 私は自分が間違っていたことを理解しました。コンテナーの私のプロジェクト構造は次のようになります。

問題: ルート ファイルで必要なコンテナーをまだエクスポートしていました: export containerB from './containerB/containerB'

次の構成では、client.js と vendors.js が作成されます。

例

エントリ

プラグイン

これを機能させるには、client.js ファイルと vendor.js ファイルを HTML に追加する必要があります。そうしないと、Uncaught ReferenceError: webpackJsonp is not defined というエラーが発生します。

index.html に client.js ファイルのみを含めて、vendors.js ファイルを自動的に要求するにはどうすればよいですか?

コードを require.ensure で分割したときと同じ動作を得たいと考えています。

私はdjangoストレージを使用してs3から静的ファイルを提供しており、それらすべてをwebpackバンドルに移動しています。django-webpack-loaderこれは、django がバンドルを見つけた場所を気にしない場合にうまく機能します。

私の問題は、を使用して分割ポイントを定義し始めるとrequire.ensure、バンドルが s3 バケットの代わりに相対パスを使用してチャンクをダウンロードしようとすることです。これは、webpack のコード分割機能が django ストレージに依存しないためです。

オンデマンドでチャンクを取得するためのカスタム ロジックを挿入する方法はありますか? 私は自分の s3 バンドル アドレスを構成ファイルにハード コーディングしているわけではありませんが、これまで試したことはありません。

これが私のwebpack構成です（coffeescriptで書かれています）

webpack、特にコードの分割とチャンキングがわかりません。そして、私はフロントエンド開発に不慣れです。

大規模なマルチページ AngularJS アプリがあり、一部のページ (すべてではない) が、多くの AMD モジュールで構成される大規模なベンダー ライブラリの一部をすべて個別のファイルで使用しているとします。そのため、ページごとに 1 つずつ、複数のエントリ ポイントを構成しています。次のバンドルを作成するのが妥当と思われます。

• 私のアプリのコードを含む各ページのバンドル、および場合によっては css など
• ベンダーの AMD モジュール (少なくとも、私のページで使用されているすべてのモジュール) を含むバンドル
• 複数のアプリ ページで使用される一般的なライブラリ (Angular、jquery、moment など) のバンドル。

そこで、次の Web ページ構成を作成します。

これは、望ましい結果を生み出していません。私が得るものは次のようなものです：

• page1Entry.bundle.js //アプリ コードといくつかのベンダー ライブラリを含む
• page2Entry.bundle.js //アプリコードのみを含む
• vendor.bundle.js //ほぼ完全に空
• commons.bundle.js //ほぼ正しいようで、角度などがありますいくつかの番号付きチャンクが作成されます。
• 4.chunk.js //小さく、2 つのページで使用されるアプリ ロジックの一部が含まれています。ベンダー ライブラリはありません -- なぜこれが作成されたのですか?
• 6.chunk.js //巨大で、アプリ ロジックとベンダー ライブラリの一部が含まれています。なぜですか?

また、デプロイされたコードがサーバーから番号付きのチャンクを取得しようとしていることがわかりますが、すべてのチャンクがデプロイされている /deploymentcontext/js フォルダーからそれらを取得していません - ページ URL (例: http ://my.domain/my/page/4.chunk.js )。これを構成するために output.publicPath を使用する場合、展開コンテキストをハードコーディングする必要があります。どうすればこれを修正できますか?

私は何を間違っていますか？