ECMAScript（又名ES2015或ES）模块是一种在JavaScript中组织内聚代码块的方法。ES模块系统有两个部分：导入模块-使用import{func}from'./myModule'导出模块-使用exportconstfunc=()=>{}导入模块是使用导入语法导入依赖项的模块：import{concat}from'./concatModule';concat('a','b');//=>'ab'并且导入的模块使用导出语法从自身导出组件：exportconstconcat=(paramA,paramB)=>paramA+paramB;import{concat}from'./concatModule'以静态方式使用ES模块：这意味着模块之间的依赖关系在编译时是已知的。虽然静态导入大部分时间都有效，但有时我们希望节省客户端带宽并有条件地加载模块。为此，我们可以使用import(pathToModule)语法以不同的方式对模块进行新的动态导入：作为函数。动态导入是ES2020开始的JavaScript语言特性。1.动态模块的导入当import关键字作为函数使用而不是静态导入语法时：constmodule=awaitimport(pathToModule);它返回一个承诺并启动加载模块的异步任务。如果模块成功加载，promise将解析为模块的内容，否则，promise将被拒绝。请注意，pathToModule可以是任何表达式，其值是表示导入模块路径的字符串。有效值是普通字符串文字（如./myModule）或带有字符串的变量。例如，我们在异步函数中加载一个模块。asyncfunctionloadMyModule(){constmyModule=awaitimport('./myModule');//...usemyModule}loadMyModule();有趣的是，动态导入接受计算为模块路径的表达式，而不是静态导入。asyncfunctionloadMyModule(pathToModule){constmyModule=awaitimport(pathToModule);//...usemyModule}loadMyModule('./myModule');现在我们知道了如何加载模块，让我们看看如何从导入的模块中提取组件。2.导入组件2.1导入命名组件考虑以下模块：//namedConcat.jsexportconstconcat=(paramA,paramB)=>paramA+paramB;这里导出了一个concat函数。如果想动态导入namedConcat.js，访问namedexportconcat，只需要解构它：asyncfunctionloadMyModule(){const{concat}=awaitimport('./namedConcat');concat('b','c');//=>'bc'}loadMyModule();2.2默认导出如果模块是默认导出的，我们可以使用default属性来访问。还是上面的例子，我们默认在defaultConcat.js中导出concat函数//defaultConcat.jsexportdefault(paramA,paramB)=>paramA+paramB;在动态导入模块中，可以使用default属性访问：asyncfunctionloadMyModule(){const{default:defaultImport}=awaitimport('./defaultConcat');defaultImport('b','c');//=>'BC'}loadMyModule();注意default在JavaScript中是关键字，所以不能作为变量名使用。2.3导入混合形式如果模块中既有defaultexport也有namedexport，同样通过解构访问：asyncfunctionloadMyModule(){const{default:defaultImport,namedExport1,namedExport2}=awaitimport('./mixedExportModule');//...}loadMyModule();3、什么时候使用动态导入建议在模块比较大或者需要根据条件导入的时候可以使用动态导入。asyncfunctionexecBigModule(条件){if(条件){const{funcA}=awaitimport('./bigModuleA');funcA();}else{const{funcB}=awaitimport('./bigModuleB');funcB();}}execBigModule(真);对于小模块（如上例中的namedConcat.js或defaultConcat.js），只有几十行代码，使用动态导入就有点大材小用了。总结当作为函数调用import(pathToModule)时，它的参数代表一个模块说明符（又名路径），然后模块将被动态加载。在这种情况下，module=awaitimport(pathToModule)返回一个承诺，该承诺解析为包含导入模块组件的对象。Node.js（13.2及以上版本）和大多数现代浏览器都支持动态导入。作者：DmitriPavlutin译者：前端小智来源：dmitripavlutin原文：https://dmitripavlutin.com/ecmascript-modules-dynamic-import/关注。转载本文请联系大千世界公众号。
