React 模块动态导入

[arlyxiao]

来源 https://codeburst.io/dynamic-imports-react-and-redux-29f6d2d88d77

处理大型项目，代码如何组织非常重要。一方面是出于性能方面考虑，另一方面是代码可读性。其中一个比较简单的策略是使用 code splitting. 像 webpack 这样的构建工具很容易可以把代码分成不同入口进行模块构建。现在我们主要讨论下另一种代码分离技巧: Dynamic Imports.

先看下下面代码

async function getComponent() {
   const {default: module} = await import('../some-other-file')
   const element = document.createElement('div')
   element.innerHTML = module.render()
   return element
}

动态导入主要利用 import 返回 promise 这个特性可以轻易做到 Lazy Loading.