使用Webpack实现动态导入命名导出

Question

使用Webpack实现动态导入命名导出

javascriptwebpackcode-splitting

20

使用webpack，如果我想对整个模块进行代码拆分，我可以将文件顶部的

``` import Module from 'module' ```

更改为以下代码：

``` import('module').then(Module => {...}) ```

当我需要使用该模块时（参见文档）。但是，仅使用单个命名导出是否也能实现这一点？也就是说，我如何对以下命名导出进行代码拆分？

``` import {namedExport} from 'module' ```

- Daniel Elkington

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- varoons · Accepted Answer

19

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 })
})

- varoons

2

第一个例子中，dynamic 函数包裹在 import 周围是什么意思？ - ips

它对于代码分割/延迟加载非常有用。语法已经改变。您可以在此处阅读更多信息：https://reactjs.org/docs/code-splitting.html - varoons

5

这将导入整个库。有一个不太好记录的魔术注释叫做 webpackExports，只会导入特定的模块：https://webpack.js.org/api/module-methods/#magic-comments。另请参见 https://blog.sasivarnan.com/dynamic-import-named-exports-in-javascript

import(/* webpackExports: ["default", "sum"] */ "./lib/math.js").then((module) => { const { default as Math, sum } = module; });

- Giorgio Tempesta