[[408237]]

ECMAScript(又名ES2015或ES)模塊是在JavaScript中組織內聚代碼塊的一種方法。

ES模塊系統(tǒng)有2個部分：

• import模塊 - 使用 import { func } from './myModule'
• export模塊- 使用 export const func = () => {}

import 模塊是使用 import 語法導入依賴項的模塊:

import { concat } from './concatModule'; 
 
concat('a', 'b'); // => 'ab' 

而被導入的模塊使用export語法從自身導出組件:

export const concat = (paramA, paramB) => paramA + paramB; 

import { concat } from './concatModule'使用ES模塊的方式是靜態(tài)的：意味著模塊之間的依賴關系在編譯時就已經知道了。

雖然靜態(tài)導入在大多數情況下是有效的，但有時我們想節(jié)省客戶的帶寬并有條件地加載模塊。

為了實現(xiàn)這一點，我們可以用不同的方式使用 import(pathToModule) 語法對模塊進行新的動態(tài)導入：作為一個函數。動態(tài)導入是ES2020開始的一個JavaScript語言特性。

1. 動態(tài)模塊的導入

當import關鍵字用作函數而不是靜態(tài)導入語法時:

const module = await import(pathToModule); 

它返回一個promise ，并開始一個加載模塊的異步任務。如果模塊被成功加載，那么promise就會解析到模塊的內容，否則，promise 就會被拒絕。

請注意，pathToModule可以是任何表達式，其值為表示導入模塊路徑的字符串。有效的值是普通的字符串字面意義(如./myModule)或有字符串的變量。

例如，我們在一個異步函數中加載一個模塊。

async function loadMyModule() { 
  const myModule = await import('./myModule'); 
  // ... use myModule 
} 
 
loadMyModule(); 

有趣的是，與靜態(tài)導入相反，動態(tài)導入接受以模塊路徑求值的表達式。

async function loadMyModule(pathToModule) { 
  const myModule = await import(pathToModule); 
  // ... use myModule 
} 
 
loadMyModule('./myModule'); 

現(xiàn)在，了解了如何加載模塊后，我們來看看如何從導入的模塊中提取組件。

2.導入組件

2.1 導入命名組件

考慮下面的模塊：

// namedConcat.js 
export const concat = (paramA, paramB) => paramA + paramB; 

這里導出了一個 concat 函數。

如果想動態(tài)導入namedConcat.js，并訪問命名的導出concat，那么只需通解構的方式就行了：

async function loadMyModule() { 
  const { concat } = await import('./namedConcat'); 
  concat('b', 'c'); // => 'bc' 
} 
 
loadMyModule(); 

2.2 默認導出

如果模塊是默認導出的，我們可以使用default屬性來訪問。

還是上面的例子，我們將defaultConcat.js里面的concat函數默認導出:

// defaultConcat.js 
export default (paramA, paramB) => paramA + paramB; 

在動態(tài)導入模塊中,可以使用default屬性來訪問:

async function loadMyModule() { 
  const { default: defaultImport } = await import('./defaultConcat'); 
  defaultImport('b', 'c'); // => 'bc' 
} 
 
loadMyModule(); 

注意，default在JavaScript中是一個關鍵字，所以它不能用作變量名。

2.3導入混合形式

如果模塊里面既有默認導出也有命名導出，同樣也是使用解構的方式來訪問：

async function loadMyModule() { 
  const {  
    default: defaultImport, 
    namedExport1, 
    namedExport2 
  } = await import('./mixedExportModule'); 
  // ... 
} 
 
loadMyModule(); 

3.何時使用動態(tài)導入

建議在模塊比較大的，或者要根據條件才導入的模塊可以使用動態(tài)導入。

async function execBigModule(condition) { 
  if (condition) { 
    const { funcA } = await import('./bigModuleA'); 
    funcA(); 
  } else { 
    const { funcB } = await import('./bigModuleB'); 
    funcB(); 
  } 
} 
 
execBigModule(true); 

對于小模塊(如前面例子中的namedConcat.js或defaultConcat.js)，只有幾十行代碼，使用動態(tài)導入在點殺雞用牛刀感覺。

總結

當調用 import(pathToModule) 作為一個函數時，其參數表示一個模塊的指定符(又稱路徑)，那么就會動態(tài)加載該模塊。

在這種情況下，module = await import(pathToModule) 返回一個 promise ，該承諾解析為一個包含導入模塊組件的對象。

Node.js(13.2及以上版本)和大多數現(xiàn)代瀏覽器都支持動態(tài)導入。

作者：Dmitri Pavlutin

譯者：前端小智 來源：dmitripavlutin原文：https://dmitripavlutin.com/ecmascript-modules-dynamic-import/

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯(lián)系大遷世界公眾號。