Ecmascript 6 使用运行时变量在ES6中进行动态导入

最近偶然发现了这个。将其用于React组件的按需进口将是一个好主意

遇到一个问题，当

import

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

例如：

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

Variabes不起作用：以55:12-23的格式生成网页包时出错

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

代码

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

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

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

字符串文本有效：只传递纯字符串文本。单击后，我可以在“开发工具网络”选项卡中看到正在下载的区块

代码

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

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

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

按照规范

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

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

我在网上遇到了一个类似的问题。但是提议的解决方案再次提倡使用字符串文本

我给大家留下一个链接。

规范的

import（）

规则与Web包本身处理

import（）

的规则不同。对于处理导入的Webpack，它至少需要能够大致猜测

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/

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

好吧，这只是一个建议（当然不是ES6！），是什么让你认为webpack已经支持它了？此外，它还需要一个客户端设置，支持动态模块加载。@Bergi：“webpack已经支持它了”-啊，很担心这个（.我在本地试用了

createreact应用程序

thingy，这不是一个很好的客户端设置，可以使用动态导入吗？我注意到如果使用

import（`../components/${res}`）WebPope捆绑包也以半随机的顺序出现CSS文件，造成了严重混乱。@ Ciantic然后考虑执行<代码>导入（'//Objs/${Re} .js）< /C> >，这样Webpack知道您只会加载JS文件。