import語句和import()屬於ES6語法，而require()屬於node中的。其中import()是ES2020引入函式，支援動態載入模組。

import命令能夠接受什麼引數，import()函式就能接受什麼引數，兩者區別主要是後者為動態載入。

import是靜態載入資源，編譯時放到程式碼塊最頂層。

import()函式則是動態按需載入返回Promise 物件。import()函式可以用在任何地方，不僅僅是模組，非模組的指令碼也可以使用。

import()函式它是執行時執行，也就是說，什麼時候執行到這一句，就會載入指定的模組。

import()函式與所載入的模組沒有靜態連線關係，這點也是與import

參考資料： Native ECMAScript modules: dynamic import()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from 
 
"module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");//這是一個處於第三階段的提案。

 defaultExport

匯入模組的預設匯出介面的引用名。

module-name

要匯入的模組。通常是包含目標模組的.js檔案的相對或絕對路徑名，可以不包括.js副檔名。某些特定的打包工具可能允許或需要使用擴充套件或依賴檔案，它會檢查比對你的執行環境。只允許單引號和雙引號的字串。name

匯入模組物件整體的別名，在引用匯入模組時，它將作為一個名稱空間來使用。

export, exportN

被匯入模組的匯出介面的名稱。

alias, aliasN

將引用指定的匯入的名稱。

描述

name引數是“匯入模組物件”的名稱，它將用一種名稱空間來引用匯入模組的介面。export引數指定單個的命名匯出，而import * as name語法匯入所有匯出介面，即匯入模組整體。以下示例闡明該語法。

匯入整個模組的內容

這將myModule插入當前作用域，其中包含來自位於/modules/my-module.js檔案中匯出的所有介面

import * as myModule from '/modules/my-module.js';

在這裡，訪問匯出介面意味著使用模組名稱（在本例為“myModule”）作為名稱空間。例如，如果上面匯入的模組包含一個介面doAllTheAmazingThings()，你可以這樣呼叫：

myModule.doAllTheAmazingThings();

僅為副作用而匯入一個模組

整個模組僅為副作用（中性詞，無貶義含義）而匯入，而不匯入模組中的任何內容（介面）。 這將執行模組中的全域性程式碼, 但實際上不匯入任何值。

import '/modules/my-module.js';

匯入預設值

引入模組可能有一個defaultexport（無論它是物件，函式，類等）可用。然後可以使用import語句來匯入這樣的預設介面。

 最簡單的用法是直接匯入預設值：

import myDefault from '/modules/my-module.js';

 也可以同時將default語法與上述用法（名稱空間匯入或命名匯入）一起使用。在這種情況下，default匯入必須首先宣告。 例如：

import myDefault, * as myModule from '/modules/my-module.js';
// myModule used as a namespace

或者

import myDefault, {foo, bar} from '/modules/my-module.js';
// specific, named imports

動態import

標準用法的import匯入的模組是靜態的，會使所有被匯入的模組，在載入時就被編譯（無法做到按需編譯，降低首頁載入速度）。有些場景中，你可能希望根據條件匯入模組或者按需匯入模組，這時你可以使用動態匯入代替靜態匯入。下面的是你可能會需要動態匯入的場景：

• 當靜態匯入的模組很明顯的降低了程式碼的載入速度且被使用的可能性很低，或者並不需要馬上使用它。
• 當靜態匯入的模組很明顯的佔用了大量系統記憶體且被使用的可能性很低。
• 當被匯入的模組，在載入時並不存在，需要非同步獲取
• 當匯入模組的說明符，需要動態構建。（靜態匯入只能使用靜態說明符）
• 當被匯入的模組有副作用（這裡說的副作用，可以理解為模組中會直接執行的程式碼），這些副作用只有在觸發了某些條件才被需要時。（原則上來說，模組不能有副作用，但是很多時候，你無法控制你所依賴的模組的內容）

請不要濫用動態匯入（只有在必要情況下采用）。靜態框架能更好的初始化依賴，而且更有利於靜態分析工具和tree shaking發揮作用

關鍵字import可以像呼叫函式一樣來動態的匯入模組。以這種方式呼叫，將返回一個 promise。

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

 這種使用方式也支援 await 關鍵字。

let module = await import('/modules/my-module.js');