1分でウェブパックで怠惰なローディングウェブ構成要素

通常、WebコンポーネントをLINKまたはFASTで定義すると、次のようになります.

import { MyComponent } from "./MyComponent";

MyComponent; // Stop tree-shaking

モジュールのインポートの一環として、DOMに入れたい<my-component>要素を定義します.
これはただうまく動作しますが、今ではWebコンポーネントのJavaScriptは、それを呼び出していたものと同じバンドルの一部です.それはめったに呼ばれていないいくつかのダイアログのピッカー、または常にメインページの負荷の後に常に呼ばれるか?
このコンポーネントを表示する必要がある場合は、この行を実行します.

await import("./MyComponent ");

Webpackは、それが動的なインポートであることを確認し、新しいバンドルを作成し、コードが実行されたときにダウンロードします.それは<my-component>を定義し、自動的にあなたのDOMで既にそれらのいずれかをアップグレードします.
私は、それがどれくらい簡単であるかについて、かなりショックを受けました.ちょうどあなたがあなたがcreate an intermediate "lazy" module to help Webpack do thatに必要とする木の揺れである必要に装っているならば、覚えていてください.