使用 Webpack 动态导入命名导出

Posted 2023-02-19

【中文标题】使用 Webpack 动态导入命名导出

【英文标题】：Dynamic import named export using Webpack

【发布时间】：2019-06-16 12:38:01

【问题描述】：

使用 webpack，如果我想对整个模块进行代码拆分，我可以更改

import Module from 'module'

在我的文件顶部

import('module').then(Module => ...

当我需要使用模块时 (docs)。是否可以做到这一点，但只需一个命名导出？也就是说，我如何对以下内容进行代码拆分：

import namedExport from 'module'

【参考方案1】：

const DynamicFoo = dynamic(import('../components/Foo').then(module => 
  const Foo = module
  return Foo
));

或

import(/* webpackChunkName: "chunkName" */ '../component/Foo').then(module => 
  const Foo = module.default
  this.setState( foo: Foo )
)

【讨论】：

在第一个示例中，这个 dynamic 函数包裹在 import 周围是什么？

它对代码分割/延迟加载很有用。语法已更改。你可以在这里阅读：reactjs.org/docs/code-splitting.html