8

私はこの質問について何日も考えてきましたが、専門家に尋ねることにしました。

ブラウザーは新しいインポート/エクスポート構文をどのように処理しますか? つまり、モジュールは非同期でロードされますか? メイン ファイルまたはエントリ ファイルとブラウザのみを参照すると、requiere モジュールが遅延ロードされます。

たぶん、この新しいアーキテクチャについて何かが欠けているか、誤解していますか?

どうもありがとうございました！

よろしく。

4

2 に答える 2

9

これは現在標準化されており、すべての主要な最新ブラウザーでサポートされています。

モジュールは非同期でロードされますか?

はい、2 つのオプションがあります。詳細は以下。

メイン ファイルまたはエントリ ファイルとブラウザのみを参照すると、requiere モジュールが遅延ロードされます。

それほど「怠惰」ではありませんが、そうです。

有効にする

仕様の詳細については、こちらとこちら(および場合によっては他の場所) を参照してください。

この動作を取得するには、次を使用してスクリプトがモジュールtype="module"であることを指定します。

<script src="main.js" type="module"></script>

またはインラインスクリプトの場合

<script type="module">
// ...module code here
</script>

つまり、スクリプトは、スクリプト定義ごとではなく、JavaScript 仕様のモジュール定義ごとに解析および処理されます。つまり、スクリプトはインポート (およびエクスポート) を持つことができます。

インポートは、scriptの URL (CSS のように上記のような別のリソースを介してロードされたモジュールのmain.js場合) またはドキュメント (上記のようなインライン モジュールの場合) に対して相対的に解決されます。

たとえば、次のドキュメントにこれがあるとしますhttp://example.com/index.html。

<script src="./handy/stuff/nifty.js" type="module"></script>

...そしてnifty.js含む

import Thingy from "./thingy.js";

...その後、ブラウザはhttp://example.com/handy/stuff/thingy.jsではなくを探しhttp://example.com/thingy.jsます。繰り返しますが、CSS のインポートと同じです。

./そのモジュール指定子が必要であることに注意してください。動作しfrom "thingy.js"ません。これは、おそらく特別な意味を持つことになるため、裸の指定子が許可されていないためです。(たとえば、Node.js では、組み込みモジュールと にインストールされたモジュールを指定する方法です。) モジュール指定子は、完全な URL、または、、またはnode_modulesで始まる相対 URL である必要があります。/./../

非同期

上記で、モジュールは非同期でロードされると述べましたが、2 つのオプションが利用可能です。仕様からのこのグラフィックは、それを最もよく表しています (最新のコピーについては、仕様を参照してください)。

ここに画像の説明を入力

ご覧のとおり、type="module"スクリプトの場合、タグに特別なフラグ属性を配置しない場合script、モジュールのすべての依存関係が解決され、HTML の解析が完了するとスクリプトが実行されます。この属性を含めるとasync、HTML 解析が完了する前に (たとえば、すべてのスクリプトがキャッシュにある場合)、より早く実行される可能性があります。(deferモジュールには無効です。)

于 2016-12-01T10:24:10.780 に答える
1

Mozilla の Web サイトのこの投稿によると、それは実装次第です。

システムはロードの仕組みを指定せず、ソース コード内のインポート宣言を調べることで事前にすべての依存関係を把握できるため、ES6 の実装はコンパイル時にすべての作業を自由に実行してバンドルできます。すべてのモジュールを 1 つのファイルにまとめて、ネットワーク経由で出荷できます。

これはまだ完全に標準化されていないため、将来変更される可能性がありますが、すべてのモジュールにスクリプト タグを追加する必要はありません。現在、一部のモジュール ローダーはすべてのファイルをバンドルしていますが、HTTP2 でのパフォーマンスに利点がないため、将来的にはそうではない可能性があります。

import ここのES6仕様を読むことができます。

于 2016-04-09T21:57:05.380 に答える