作者：DmitriPavlutin译者：前端小智来源：dmitripavlutin有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧.本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。ECMAScript（又名ES2015或ES）模块是一种在JavaScript中组织内聚代码块的方法。ES模块系统有2个部分：导入模块-使用import{func}from'./myModule'导出模块-使用exportconstfunc=()=>{}导入模块是使用导入语法导入依赖项的模块：import{concat}来自'./concatModule'；连接（'a'，'b'）;//=>'ab'并且导入的模块使用导出语法从自身导出组件：exportconstconcat=(paramA,paramB)=>paramA+paramB;import{concat}from'./concatModule'ES模块的方式used是静态的：意味着模块之间的依赖关系在编译时是已知的。虽然静态导入大部分时间都有效，但有时我们希望节省客户端带宽并有条件地加载模块。为此，我们可以使用import(pathToModule)语法以不同的方式对模块进行新的动态导入：作为函数。动态导入是ES2020开始的JavaScript语言特性。1.动态模块的导入当import关键字作为函数使用而不是静态导入语法时：constmodule=awaitimport(pathToModule);它返回一个承诺并启动加载模块的异步任务。如果模块成功加载，promise将解析为模块的内容，否则，promise将被拒绝。请注意，pathToModule可以是任何表达式，其值是表示导入模块路径的字符串。有效值是普通字符串文字（如./myModule）或带有字符串的变量。例如，我们在异步函数中加载一个模块。asyncfunctionloadMyModule(){constmyModule=awaitimport('./myModule');//...使用myModule}loadMyModule();有趣的是，与静态导入相比，动态导入接受计算为模块路径的表达式asyncfunctionloadMyModule(pathToModule){//...使用myModule}loadMyModule('./myModule');现在我们知道如何加载模块，让我们看看如何从Extractcomponentsfromthemodule导入它。2.导入组件2.1导入命名组件考虑以下模块：//namedConcat.jsexportconstconcat=(paramA,paramB)=>paramA+paramB;这里导出了一个concat函数。如果想动态导入namedConcat.js并访问named导出的concat，只需要解构它：asyncfunctionloadMyModule(){const{concat}=awaitimport('./namedConcat');连接（'b'，'c'）;//=>'bc'}loadMyModule();2.2默认导出如果模块是默认导出的，我们可以使用default属性来访问。还是上面的例子，我们默认在defaultConcat.js中导出concat函数//defaultConcat.jsexportdefault(paramA,paramB)=>paramA+paramB;在动态导入模块中，可以使用default属性来访问：asyncfunctionloadMyModule(){const{default:defaultImport}=awaitimport('./defaultConcat');默认导入（'b'，'c'）;//=>'bc'}loadMyModule();请注意，JavaScript中的default是A关键字，因此它不能用作变量名。2.3导入混合形式如果模块中既有defaultexport也有namedexport，同样通过解构访问：asyncfunctionloadMyModule(){const{default:defaultImport,namedExport1,namedExport2}=awaitimport('./mixedExportModule');//...}loadMyModule();3.什么时候使用动态导入建议在模块比较大或者需要根据条件导入的时候使用动态导入。asyncfunctionexecBigModule(condition){if(condition){const{funcA}=awaitimport('./bigModuleA');功能A（）；}else{const{funcB}=awaitimport('./bigModuleB');函数B();}}execBigModule(真);对于小模块（如上例中的namedConcat.js或defaultConcat.js），只有几十行代码，使用动态导入就有点大材小用了。总结当作为函数调用import(pathToModule)时，它的参数代表一个模块说明符（又名路径），然后模块将被动态加载。在这种情况下，module=awaitimport(pathToModule)返回一个承诺，该承诺解析为包含导入模块组件的对象。Node.js（13.2及以上版本）和大多数现代浏览器都支持动态导入。编辑过程中可能存在的BUG无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。原文：https://dmitripavlutin.com/ec...每周更新交流文章。可以微信搜索【大千世界】第一时间阅读，回复【福利】还有很多前端视频等着你。本文在GitHub上https://github.com/qq449245884/xiaozhi已收录，欢迎Star。
