Webpack 导入（“路径”）和导入“路径”之间的网页差异；路径“；

两者的区别是什么

import( "file.js" );

及

这两种语法都是有效的，但第二种情况有时不适用于浏览器。

这都是关于“bundle”和“chunk”的

如果你认为模块是独立的乐高积木，那么一个包就是一个乐高积木集。这是构建最终模型所需的所有部分

然而，继续lego的类比，在一些更大、更复杂的构建中，将集合分解为更小的部分是很有帮助的，这些部分可以单独组装，然后在最后组合。事实上，对于一些乐高玩具，部分玩具甚至可能是可选的。例如，我买了一套航天飞机和运输卡车。它们是彼此完美互补的独立构建，最终可以组合起来完成模型，但如果你真正想要的是航天飞机，那么卡车甚至不需要构建

类似地，Webpack允许您将“捆绑包”分解为“块”，可以根据需要动态加载或不加载。一旦出现，这些块就形成了一个无缝工作的单一、内聚的捆绑包，但是您可以选择不加载捆绑包中不需要的部分，或者延迟加载，直到实际需要为止

import“Foo”

将告诉Webpack在bundle主块中包含Foo模块，因为没有它，bundle将无法工作

import（“Foo”）

将告诉Webpack将模块放在单独的块中，稍后可以加载。它是特定功能所必需的，但该功能不是立即需要的，就是完全可选的。在运行时，执行

import（）

函数时将加载块

import（）

返回一个承诺，该承诺将在区块中的模块可用时解析。因此，您可能需要等待承诺的解决：

const Foo=wait import（“Foo”）或
导入（“Foo”）。然后（函数（Foo）{/*…*/}）

在任何一种情况下，模块都可以作为一个包无缝地相互交互

因此，为了清楚起见：

模块A:

import B from "B"

async function loadOptionalFeature() {
  const C = await import("C");
  // ...
}

import D from "D"

import D from "D"

模块B:

import B from "B"

async function loadOptionalFeature() {
  const C = await import("C");
  // ...
}

import D from "D"

import D from "D"

模块C:

import B from "B"

async function loadOptionalFeature() {
  const C = await import("C");
  // ...
}

import D from "D"

import D from "D"

A
是我的输入文件。Webpack将构建一个核心块，其中包括
a
，
B
，并且因为它包含在
B
，
D

将为
C
生成一个单独的块，但是此块将不包括
D
，因为它已经包含在核心块中。当加载第二个块中的
C
模块时，它将具有与
B
相同的
D
访问级别