Recentemente tropeçou noproposta de importação dinâmica e também issoVídeo do youtube . O ideal seria usá-lo para importações sob demanda de componentes no React.

Correndo para um problema em que não consegui "resolver" um caminho quandoimport são passados literais de string como variáveis de tempo de execução.

por exemplo:

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

Tentei com várias opções para _fetchComp, mas a passagem de parâmetros não parece funcionar. Uma análise das diferentes opções tentadas.

Cadeias de modelo Não funciona : Obtendo o erro abaixo ao clicar

Error Error: Cannot find module '../components/Counter'. at webpackAsyncContext (^.*$:53)

Código

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

Variabes Não funciona: Obtendo um erro durante a compilação do webpack como 55: 12-23Critical dependency: the request of a dependency is an expression

Código

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

String literal Trabalho : Apenas passando literais de string pura. Ao clicar, consigo ver o pedaço sendo baixado na guia Rede de ferramentas de desenvolvimento

Código

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

Conforme a especificação,

import () aceita seqüências de caracteres arbitrárias (com as seqüências de modelo determinadas pelo tempo de execução mostradas aqui), não apenas os literais de sequência estática.

Então, eu esperava que a string literal fizesse a parte, mas isso não parece ser o caso.

Me deparei com um problema semelhante emrastreador de problemas de fluxo. Mas a solução proposta defendia o uso de literais de string novamente.

Vou deixar todos vocês com umCodeSandbox ligação.