Question

我有一个文件导出很少的组件，可以通过

轻松导入

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

但是现在需要异步加载它们并且webpack允许我们使用import()将文件拆分成漂亮的块但是我无法弄清楚我是否可以import()只./components中的一个组件}。另一种方法是将它们放入单独的文件中，但是想先通过import（）检查是否可行。

Answer 1

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

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

Bundlers应该能够针对此代码应用树抖动并确定仅使用component1 - 但是我不完全确定当前版本的Webpack是否执行此操作。它肯定会为./components创建一个单独的块。