JavaScriptの動的インポート

JavaScriptのこの新しい今後の機能を学ぶ

私は使用する特権を持ったことがありません動的インポートごく最近まで、Next.jsアプリケーションでコード分割を強化するためにそれらを使用していましたが、それらはわずかに異なるため、少し調査する必要がありました。静的インポート

ESモジュールの静的インポートデフォルトのエクスポートこのように見えます:

import moment from 'moment'

オブジェクトの破棄を使用して、名前付きエクスポートを取得できます。

import { format } from 'date-fns'

静的インポートにはいくつかの制限があります。

  • それらはファイルのトップレベルに制限されています
  • 条件付きでロードすることはできません(if
  • パッケージの名前は実行時に決定できません

動的インポートはこれらすべてのことを実行できます。

構文は少し異なります。

そして彼らは働くモジュール内

あなたはこれらを次のように使用します:

const module = await import('module')

デフォルトのエクスポートを使用するには、最初に呼び出す必要があります.default()

モーメントの使用例:

const moment = (await import('moment')).default()

一方、名前付きインポートは期待どおりに機能します。

const { format } = await import('date-fns')

今日は使えますか?はい!ザ・ブラウザのサポートすでにかなり良いです、そしてまたありますBabelプラグイン

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: