转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文出处：https://wanago.io/2018/08/13/webpack-4-course-part-seven-decreasing-the-bundle-size-with-tree-shaking/
在本系列的第一篇文章中，我们讨论了导入（import）和导出（export）。这次我们深入介绍动态导入（dynamic import），它值得专门用一篇文章来介绍。我们会介绍动态导入是什么以及如何使用它们。开始吧！
在过去，ECMAScript模块是完全静态的。你必须在运行代码之前指明想要导入和导出的东西。随着动态导入提案的出现，我们有了额外的选择，即动态地导入模块。现在它进行到了TC39流程的第三个阶段。有了它，你就可以添加动态导入模块了。使用它时，你可能会根据用户及其操作行为的做相应处理。比如，你有一个单页应用，只有当用户决定打开它的子页面时才加载特定代码。这样可以大幅节省应用的初始加载时间。
使用动态导入
动态导入操作符是作为函数使用的。它接受一个字符串参数，返回一个Promise。当模块加载好后，这个Promise被resolve。
如果你想了解更多关于Promise的内容，可查看以实现一个排序算法为例解释Promise和回调函数。
document.addEventListener("DOMContentLoaded", () => { const button = document.querySelector('#divideButton'); button.addEventListener('click', () => { import('./utilities/divide') .then(divideModule => { console.log(divideModule.divide(6, 3)); // 2 }) }); });