反应代码拆分：是 import() 函数的参数不是字符串

Question

这很奇怪。在我尝试代码拆分的过程中，我遇到了这个：

const g = "bi";
const importStr = `react-icons/${g.toLowerCase()}`;
console.log(importStr);
console.log(importStr === `react-icons/bi`);

import(importStr).then(module => {
    console.log(module);
});



import(`react-icons/bi`).then(module => {
    console.log(module);

});

在上面的代码中，如果我导入“importStr”，那么导入会抛出一个错误：

Uncaught (in promise) Error: Cannot find module 'react-icons/bi'

但是如果我直接输入“react-icons/bi”，那就没有问题了。如您所见，

importStr === `react-icons/bi`

为什么以及如何解决这个问题？我实际上不能直接使用“react-icons/bi”，因为 g 是动态的并且可以采用其他值。

Answer 1

在 React 中实现代码拆分的一种简单方法是延迟加载，如此处所示（这可能比导入动态字符串更容易）：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

此实现将仅在首次呈现时加载带有 OtherComponent 的包。

示例来自 reactjs.org：

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

More info on React.lazy

Answer 2

我引用以下comment

Webpack performs a static analyse at build time. It doesn't try to infer variables which that import(test) could be anything, hence the failure. It is also the case for import(path+"a.js").

由于 tree shaking 功能，webpack 会尝试从包中删除所有未使用的代码。这也意味着类似的东西可以工作

import("react-icons/" + g)

编辑：根据您的建议，我将其更新为

import("react-icons/" + g.toLowerCase()+ '/index.js')

反应代码拆分：是 import() 函数的参数不是字符串

react code splitting: is the argument for the import() function not a string

javascript

reactjs

code-splitting