動的インポートを使用する方法

動的インポートは、JavaScript ES 020仕様で導入された特徴の一つです.この機能は、ES 2015、またはES 6、より多くの使用可能で強力な導入されたモジュールになります.このチュートリアルでは、JavaScriptの動的インポートがどのように動作し、どのようにそれらを使用するかを理解するのに役立ちます.

ESモジュールとチャンキング
モジュールはES 2015(ES 6)仕様の一部として導入されました.これによりJavaScript開発者はJavaScriptコードをより小さなチャンクに分割するのに適しています.また、モジュールは、それらのチャンクを管理することをより簡単にしました.
最良の部分は、このチャンキングプロセスは非常に簡単で簡単です.JavaScript開発者がモジュールを使用したい場合、基本的には2つだけ行う必要があります.まず、彼女は彼女が他の場所で使用したいコードのいくつかのチャンクをエクスポートすることを忘れないようにする必要があります.これを行うには、彼女はexport statement .
彼女がエクスポートしたチャンクの1つを使用したいときに2番目のことが来る.彼女は使用する必要がありますimport statement コードの特定のチャンクをインポートしたいファイルにインポートします.これにより、現在エクスポートされているコードのチャンクが利用可能なファイルのスコープで利用できるようになります.

// File file1.js
// Export some function with "export" statement:
export const sumTwoNumbers = (numA, numB) => numA + numB


// File file2.js
// Import exported function sumTwoNumbers with "import" statement:
import { sumTwoNumbers } from './file1'

// Use imported function:
sumTwoNumbers(15, 98)
// Output:
// 113


// NOTE:
// You can also export something with default export
export default (numA, numB) => numA + numB

// File file2.js
// Import exported function sumTwoNumbers with default "import" statement:
import sumTwoNumbers from './file1'

非常にシンプルで簡単な構文を覚えているだけで2つのステートメントを使用すると、任意の場所でコードを使用することができます.残念なことに、何も完璧でありません、そして、モジュールさえ若干の欠点を持ちます.

静的輸入問題
ESモジュールの1つの大きな欠点は静的であることです.これは、いくつかのモジュールをインポートするときには、コードが実行された場合でも常にインポートされます.上記の例に戻りましょうsumTwoNumbers 関数.この関数が特定の条件の下でのみ呼び出されることを想像してください.
いくつかあるif...else statement 関数は内部でのみ呼び出されます.このコードを実行すると、sumTwoNumbers 関数がインポートされます.JavaScriptが気にしない場合if...else 文は関数を呼び出します.モジュールをインポートし、関数が実行されない場合はJavaScriptの問題ではありません.
これはあなたのために意味し、あなたのコードを実行している他の誰でも、簡単です.それが実際に使用されるかどうかに関係なく、あなたはどこかにインポートされるすべてをダウンロードして実行する必要があります.ほとんどの場合、これは大丈夫かもしれません.しかし、時々、ユーザーの帯域幅のいくらかを保存したいかもしれません.
これを行う一つの方法は、インポートされたモジュールを条件付きでロードすることです.常にそれらをロードする代わりに、デフォルトで、あなたは彼らが使用されるということを知っているときだけ、彼らをロードします.の場合sumTwoNumbers 機能とif...else ステートメント内で関数をインポートできます.
その時点で、実行コンテキストがステートメントに入ると、この関数が呼び出されることを確認します.これはダイナミックなインポートが役に立つ場合です.

救助へのダイナミックな輸入
ダイナミックインポートのアイデアは、コードをいくつかのチャンクをインポートするときにのみ、それを必要と知っている.例えば、sumTwoNumbers 関数内部if...else 関数が呼び出されるステートメント.ステートメント内のコードブロックが決して実行されない場合、sumTwoNumbers インポートされません.
良い音?それはさらに良いです.本当に新しい構文はありません.動的インポートは静的インポートとほぼ同じ構文を使用します.一つの違いはimport あなたが使う声明としてimport 関数として.この関数は、1つのパラメータ、モジュールへのパスを受け取り、promise .

// Dynamic import syntax:
const module = import('path')

// Examples:
const module1 = import('./myModule')

const modulePath = './myModule'
const module2 = import(modulePath)

モジュールが正常にロードされると、約束はモジュールの内容に解決します.何か問題があると約束は拒絶する.以来import() 関数は約束を返すasync/await 構文(async関数とwait演算子)は便利で、コードを短くすることができます.

// await example with global await:
const module1 = await import('./myModule')

const modulePath = './myModule'
const module2 = await import(modulePath)

// Use what imported from module2
module2.someExportedFunction()

// await example with async function:
async function loadImport() {
  const module1 = await import('./myModule')

  // ... use the module
  module1.someExportedFunction()
}

インポートインポート
静的インポートと同様に、動的インポートもデフォルトのエクスポートをインポートすることができます.

デフォルトエクスポート
デフォルトのエクスポートを使用して何かをエクスポートします.動的にインポートするときは、default インポートプロシージャが返すオブジェクトのプロパティ.まあ、ほとんど.キャッチはdefault はJavaScriptのキーワードです.これはまた、インポートされたモジュールのように変数を宣言するのに使用できないことを意味します.
この問題を解決するためにできることはdestructuring assignment また、その既定のインポートの別名を作成します.次に、インポートしたエイリアスを使用して、インポートしたものを安全に使用できます.

// File 1:
// Use default export to export a function:
export default (numA, numB) => numA * numB


// File 2:
// Create async function:
async function loadModule() {
  // Use dynamic import to import function from "file1"
  // and use destructuring assignment with alias:
  const { default: defaultExport } = await import('./file1')

  // Use the imported function by using the alias:
  defaultExport(315, 414)
}

// Call the loadModule() function:
loadModule()
// Output:
// 130410

もう一つのオプションは、破壊課題を使用せずに、モジュールを変数に割り当てることです.これはモジュール全体を変数としてオブジェクトに割り当てます.さて、このオブジェクトのdefault デフォルトのエクスポートにアクセスするプロパティ.

// File 1:
// Use default export to export a function:
export default (numA, numB) => numA * numB


// File 2:
// Create async function:
async function loadModule() {
  // Assign the module to a variable:
  const myExport = await import('./file1')

  // Use the imported function by using the alias:
  myExport.default(56, 89)
}

// Call the loadModule() function:
loadModule()
// Output:
// 4984

名称エクスポート
動的インポートを使用して名前付きのエクスポートをインポートも簡単です.エイリアスを使う必要はありません.あなたがしなければならないすべては、変数を割り当てるか、または破壊する割り当てなしでモジュールを割り当てることです.次に、インポートしたものを使用できます.デストラクタの割り当てを使用しない場合は、モジュールオブジェクトにアクセスすることでできます.
破壊の割り当てを使用する場合は、単にオブジェクトの破壊中に使用する変数名を使用できます.

// Example without destructuring:
// File 1:
// Use default export to export a function:
export const divideNumbers = (numA, numB) => numA / numB


// File 2:
// Create async function:
async function loadModule() {
  // Assign the module to a variable:
  const myNExport = await import('./file1')

  // Use the imported function by using the alias:
  myNExport.divideNumbers(996598, 15)
}

// Call the loadModule() function:
loadModule()
// Output:
// 66439.86666666667


// Example with destructuring:
// File 1:
export const divideNumbers = (numA, numB) => numA / numB


// File 2:
// Create async function:
async function loadModule() {
  // Use destructuring to assign the divideNumbers() function:
  const { divideNumbers } = await import('./file1')

  // Use the imported function by using the alias:
  divideNumbers(477575, 66)
}

// Call the loadModule() function:
loadModule()
// Output:
// 7235.984848484848

混合輸出
つのデフォルトといくつかの名前をつけられた混合輸出を輸入することは基本的に前の2つのアプローチを結合することです.また、すべてのエクスポートを変数に割り当てるには、Deploturing Assignmentを使用できます.デフォルトのエクスポートの別名を作成してください.さもなければ、JavaScriptはdefault キーワード.
さもなければ、すべてのエクスポート、モジュール全体のオブジェクトを単一の変数に割り当てることができます.次に、各エクスポートは、このモジュールオブジェクトのプロパティになります.

// Example with destructuring:
// File 1:
export default (numA, numB) => numA % numB
export const subtractNumbers = (numA, numB) => numA - numB


// File 2:
async function loadModule() {
  // Use destructuring to assign the named and default exports:
  const { default: getModulo, subtractNumbers } = await import('./file1')

  // Use the imported functions:
  subtractNumbers(477575, 66)
  getModulo(537, 8)
}

// Call the loadModule() function:
loadModule()
// Output:
// 477509
// 1


// Example without destructuring:
// File 1:
export default (numA, numB) => numA % numB
export const subtractNumbers = (numA, numB) => numA - numB


// File 2:
// Create async function:
async function loadModule() {
  // Assign the whole module to a single variable:
  const myModule = await import('./file1')

  // Use the imported functions:
  myModule.subtractNumbers(976532, 321)
  myModule.default(9872, 11)
}

// Call the loadModule() function:
loadModule()
// Output:
// 976211
// 5

動的インポートを使用する場合
動的インポートは静的モジュールの置き換えであり、しばしば使用されるべきである.これは本当ではない.彼らは何も取り替えていない.彼らは、いくつかの問題を解決することができるだけのツールです.これはまた、あなたが新しいデフォルトにならないことを意味します.静的インポートを使用する必要があります.
あなたの輸入品の大部分は小さなモジュール、通常は数十行のコード用です.これらのモジュールをロードすると、動的にそのような違いは生じません.ダイナミックな輸入が良い選択であるかもしれない状況は、あなたが大きなモジュールで働くときです.いくつかのモジュールがロードする時間がかかるとき、動的にロードすることはパフォーマンスを助けることができます.
これは特に、そのモジュールがプログラムに直ちに必要でない場合です.もう一つの良い使用例は、モジュールが最初とBから入手できない場合があります.モジュールへのパスは動的に構築されます.ダイナミックな輸入は、これらのまれな状況をより簡単に扱うことができます.これらの状況を除いて、静的なインポートに固執する.

JavaScriptで動的インポートを使用する方法
モジュールはあなたの仕事をより簡単にすることができます、あなたのコードはより扱いやすくて、よりきれいです.動的なインポートは、必要に応じてモジュールをロードするのを助けることによって、これをさらに引き受けることができます.これは、コードのパフォーマンスを向上させることができます.このチュートリアルでは、ダイナミックなインポートがどのようなものか、どのように動作するか、どのように使用するかを学びました.