带有运行时变量的 ES6 中的动态导入答案

【问题标题】：Dynamic imports in ES6 with runtime variables带有运行时变量的 ES6 中的动态导入
【发布时间】：2018-06-05 21:12:28
【问题描述】：

最近偶然发现了 dynamic import proposal 和这个 Youtube video 。将它用于 React 中组件的按需导入是一个好主意。

当import 将字符串文字作为运行时变量传递时，我无法“解析”路径。

例如：

<div>
  <button onClick={this._fetchComp.bind(this, "../component/Counter")}>Get Async Comp</button>
</div>

尝试了 _fetchComp 的多个选项，但传递参数似乎不起作用。尝试的不同选项的细分。

错误：找不到模块“../components/Counter”。在 webpackAsyncContext (^.*$:53)

代码

    _fetchComp(res) {
    import(`${res}`).then(() => {
        console.log("Loaded")
    },(err)=>{
        console.log("Error",err)
    })}

关键依赖：依赖的请求是一个表达式

**Code**

    _fetchComp(res) {
    import(res).then(() => {
        console.log("Loaded")
    },(err)=>{
        console.log("Error",err)
    })}

String literal Works：只传递纯字符串文字。单击时，我可以在开发工具网络选项卡中看到正在下载的块

代码
```
_fetchComp(res) {
import("../components/Counter").then(() => {
    console.log("Loaded")
},(err)=>{
    console.log("Error",err)
})}
```

按照规范，

import() 接受任意字符串（使用运行时确定的模板此处显示的字符串），而不仅仅是静态字符串文字。

所以我希望字符串文字能起到作用，但事实并非如此。

我在flow issue tracker 上遇到了类似的问题。但提议的解决方案再次提倡使用字符串文字。

我会给大家留下一个CodeSandbox 链接。

【问题讨论】：

嗯，这只是一个提议（绝对不是 ES6！），是什么让你认为 webpack 已经支持它了？此外，它还需要支持动态模块加载的客户端设置。
@Bergi ：“webpack 已经支持它了” - 啊担心这个！ :( 。我在本地使用 create-react-app 进行了试验，这不是一个很好的客户端设置来破解动态导入吗？

【解决方案1】：

规范中import() 的规则与 Webpack 本身能够处理 import() 的规则不同。为了让 Webpack 处理导入，它至少需要能够大致猜出 import() 所引用的内容。

这就是您的 import("../components/Counter") 示例有效的原因，因为 Webpack 可以 100% 确定需要加载的内容。

对于你的用例，你可以这样做

_fetchComp(res) {
  import(`../components/${res}`).then(() => {
    console.log("Loaded")
  }, (err)=>{
    console.log("Error", err)
  })
}

与

this._fetchComp.bind(this, "Counter")

现在 Webpack 知道路径以../components/ 开头，它可以自动捆绑每个组件，然后加载您需要的组件。这里的缺点是因为它不知道您正在加载哪个组件，所以它必须全部加载它们并且不能保证它们都实际被使用。这就是动态导入的权衡。

【讨论】：