問題タブ [code-splitting]

この es6 コード例を webpack を介してコード分割可能なチャンクに変換する方法を誰かに説明してもらえますか? 他の良い例を見つけることができませんでした。

私はwebpackコード分割を利用しようとしています。すべてがうまく機能しているように見えます.webpackはコードを正しく分割し、依存関係はほとんど期待どおりです.

ホットモジュール交換で動作させることができないことを除いて。

127.0.0.1:8009/main.js を正常にロードしました

しかし、main.js は 127.0.0.1:8001/assets/1.chunk.js を読み込もうとしています

それは理にかなっていますか？私は何かが欠けているに違いない。

ノード サーバーを 127.0.0.1:8001 で実行し、ホット ミドルウェア クライアントを 127.0.0.1:8009 で実行しています。

** main.js**

私のWebpack構成

シンプルホットサーバー

ここで報告された問題と同様:

require.ensure を使用するときに、クエリ文字列をチャンク ファイル リクエストに追加するにはどうすればよいですか?

しかし、 を呼び出したときにのみ認識されるカスタム パラメータを送信する必要がある場合はどうすればよいrequire.ensureでしょうか。たとえば、サーバー側で特定のチャンクに対するユーザーの HTTP GET 要求を承認する識別キーは?

私のルートはjsxでマッピングされています。私は webpack を使用してバンドルし、ルートに従って出力 js ファイルをチャンクに分割したいと考えています。

require.ensure を試しましたが、webpack は何も分割しません。最後に、バンドル ファイルを 1 つだけ生成します。ここで何が間違っているのかわかりません。ルートが存在する2つの場所を維持したくありません。理想的には、webpack は既に定義済みのルートを使用します。

グラントファイル構成:

開発タスクの出力

いくつかのチュートリアルを読みましたが、このケースはあまり一般的ではないようです。

次の webpack 構成があります。

次のコードがあり、コード分割lib/Polywrap.jsを展開しようとしています:

Polywrap と 2 つのチャンクの 3 つのファイルが出力されると予想していました。残念ながら、Polywrap だけがすべてバンドルされて出力されます。内部のすべての js ファイル../langs/がバンドルされています。どうしたの？

出力は次のとおりです。

コード分​​割を構成しようとしています

• 角度1.5
• タイプスクリプト 2.x
• ウェブパック2

基本的なセットアップ: vscode typescript コンパイラを使用して、ソース フォルダーと同じフォルダー構造を持つ出力フォルダーに ts ファイルをコンパイルします。

webpack のエントリ ポイントは testapp\testapp.js で、これには以下が含まれます

現時点では、pageonecomp.ts も pagetwocomp.ts も myservice.ts から何も使用しません。コンパイルして webpack 2 を実行すると、次のように表示されます。

0.bundle.js には MyService が含まれ、testapp.bundle.js には pageonecomp、pagetwocomp、および testapp 角度モジュールが含まれています。

しかし今、pageonecomp.ts 内の myservice.ts からエクスポートされた MyService タイプを使用したいと考えています。typescript が MyService クラスでコード補完を提供できるようにするには、 pageonecomp.ts に MyService タイプをインポートする必要があります。

しかし、ここで webpack を実行すると、出力からわかるようにコード分割が機能しなくなります。

MyService クラスが testapp バンドルに含まれるようになりましたが、これは望ましくありません...

これを機能させる方法を知っている人はいますか？目標は、webpack が import ステートメントのみに基づいてバンドルを作成し、バンドルに何を入れるかを決定し、System.import でコード分割が発生する場所を指定することです。

注：現時点では、追加のAngularモジュールの動的ロードは必要ありません。複数のエントリポイント（複数の小さなスパ）のバンドルと、それらのスパ間で共有されるいくつかの一般的なバンドルを作成しようとしています.

アプリのさまざまなページ間の動的ルーティングで react/react-router/webpack スタックを使用しています。つまり、すべてのページが要求によって非同期に読み込まれます。すべてがうまく機能しますが、新しいバージョンを展開すると、すべてのページのすべての Js ファイルを取得していない現在のアクティブなユーザーは、まだアクセスしていない別のページに移動しようとするとスタックします。

例

次の .js 生成ファイルと md5 (キャッシュ無効化用) を含むコード分割アプリがあるとします。

ユーザーがメイン ページにアクセスし、 のみを取得しmain.123.jsます。

その間、別の md5 を使用して新しいバージョンをデプロイします (profile.js と main.js の両方に変更を加えました)。

ユーザーがプロファイル ページに移動しようとすると、アプリは取得を試みprofile.456.jsますが、profile.js ファイルが交換されており、アプリが新しいファイル名を認識する方法があるため、エラーが発生します。

私は2つの解決策を思いついたが、どれも本当に問題を解決していない

解決策 1? 本番環境では常に 2 つのバージョンを使用できるようにします。ただし、2 つのバージョンでは不十分な場合があるため、滑りやすい斜面です。つまり、ユーザーは自分のタブを数日間開いたままにしておくことができるため、アプリを再び使用することを決定するまで、いくつかの展開を行うことができます。

解決策 2? js 読み込み例外をキャッチし、ユーザーにアプリをリロードするメッセージを表示します。この解決策はうまくいくかもしれませんが、あなたが私に尋ねると、それは迷惑なUXです.

この種の問題を経験した人はいますか？助言がありますか？

編集 - 解決策: 2 番目のアプローチ (解決策 2) を使用することにしました。読み込みエラーをキャッチするには、require.ensure 実装が require ファイル例外のキャッチをサポートしていないため、webpack を webpack 2 にアップグレードする必要がありました。System.importエラー処理をサポートするwebpack 2を使用できます。だから基本的に私がしたことは次のとおりです。

を使用してコンポーネントを動的にロードしますSystem.import:

}

そしてエラーをキャッチ：

この質問はおなじみのように見えますが、実際にはそうではありません。理由を説明しましょう。これは、関数をヘッダー ファイルに保存し、それをインクルードして呼び出すことではありません。例は私のクエリを明確に説明するので、ここに行きます: 私は次のようなプログラムを持っています:

#include whatever_should_be_included

int main() {

whatever-1

whatever-2

whatever-3

. . .

}

ifこれらのすべては、条件、loops、および実際に何でも含む、プログラム内のコードです。これらの「何でも」をファイルに保存したい、たとえばプレーンテキストファイルまたは必要な拡張子を「」としましょう。拡張子を「exten」としましょう。次に、それらを次のように保存します。

chunk-1.exten, chunk-2.exten, .... etc を含むファイル: whatever-1, whatever-2,... etc コード行のチャンクと私のプログラムは次のようになります:

#include whatever_should_be_included #include those_chunks_maybe

int main(){

chunk-1.exten; //or whatever syntax necessary

chunk2.exten;

chunk-3.exten;

. . .

}

私はC ++とプログラミング全般の初心者なので、簡単にやってください:)少し説明を加えた段階的な明確な回答をいただければ幸いです。

編集-1:

1. Ubuntu 16.04 を使用しています

2. 私のコンパイラは g++ ですが、直接使用していません。ルート マクロとして、CERN の ROOTシェル内でプログラムをコンパイルまたはロードしています。

編集-2:

もちろん、より良い方法は関数とヘッダーを使用することですが、それは、プレーンなコードテキストをさまざまなファイルにチャンクアウトし、それらを main 内に含めるというこの機能を探索できないことを意味するものではありません! 私はこれを学びたかったのですが、この (どんなに退屈な) 機能を学ぶことがいかに間違っているのか理解できません !! なぜ正確に反対票を投じるのですか？この質問は人を傷つけますか? 好奇心旺盛で知識を深めませんか？