import() 相当于 import { something } from 'somewhere';答案

【问题标题】：import() equivalent of import { something } from 'somewhere';import() 相当于 import { something } from 'somewhere';
【发布时间】：2017-11-09 21:37:36
【问题描述】：

我有一个导出几个组件的文件，这些组件可以通过以下方式轻松导入

import { component1, component2 } from './components'

但是现在需要异步加载它们，webpack 允许我们使用 import() 将文件拆分成漂亮的块，但我不知道我是否可以 import() 仅来自 ./components 的单个组件。替代方法是将它们放入单独的文件中，但想先通过 import() 检查是否可行。

【问题讨论】：

您想从组件中导入一个组件，组件 1 或组件 2 正确吗？
@MayankShukla 是的，如果可能的话，它会被 webpack 使用import()分割成单独的文件

标签： javascript reactjs webpack ecmascript-6

【解决方案1】：

虽然import() 默认为您提供所有导出，但您可以使用解构来选择您想要的导入：

import("./components")
    .then(({ component1 }) => {
        console.log(component1);
    });

Bundlers 应该能够对这段代码应用 tree shaking 并确定只使用了 component1 - 但是我不完全确定当前版本的 Webpack 是否这样做。至少它肯定会为./components 创建一个单独的块。

【讨论】：