使用 Webpack 动态导入命名导出

Dan*_*ton 13 javascript webpack code-splitting

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

import Module from 'module'

在我的文件顶部

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

当我需要使用模块 ( docs ) 时。是否有可能做到这一点,但只有一个命名的导出?也就是说,我怎么能对以下内容进行代码拆分:

import {namedExport} from 'module'

var*_*ons 13

const DynamicFoo = dynamic(import('../components/Foo').then(module => {
  const {Foo} = module
  return Foo
}));
Run Code Online (Sandbox Code Playgroud)

或者

import(/* webpackChunkName: "chunkName" */ '../component/Foo').then(module => {
  const {Foo} = module.default
  this.setState({ foo: Foo })
})
Run Code Online (Sandbox Code Playgroud)

  • 这将导入整个库。有一个名为“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 { 默认为 Math, sum } = module; });` (5认同)
  • 第一个示例中围绕 import 的这个“动态”函数是什么? (2认同)