webpack - webpack import("path") 和 import "path" 的区别

Question

和有什么区别

import( "file.js" );

和

import "file.js";

两种语法都有效，但第二种情况有时在 ib 浏览器中无法正常工作。

标签： webpackimport

Answer 1

这都是关于“捆绑”和“块”的。

如果您将模块视为单独的乐高积木，那么捆绑包就是乐高套装。这是构建最终模型所需的所有部件。

然而，暂时继续用乐高进行类比，它有助于在一些更大、更复杂的构建中将套装分解成更小的部分，这些部分可以单独组装，然后在最后组合起来。事实上，对于一些乐高套装，套装的某些部分甚至可能是可选的。例如，我买了一套以航天飞机和运输卡车为特色的套装。它们是彼此完美互补的单独构建，并且可以在最后组合以完成模型，但如果您真正想要的只是穿梭车，那么甚至不需要建造卡车。

类似地，Webpack 允许您将“包”分解为“块”，可以根据需要动态加载或不加载。一旦呈现这些块，就会形成一个单一的、有凝聚力的捆绑包，可以无缝地工作，但是您可以选择不加载捆绑包中不需要的部分，或者延迟加载它们直到真正需要它们。

import "Foo"在两个模块之间创建一个“硬”链接，告诉 Webpack 当前模块没有 Foo 模块就无法运行。

import("Foo")在两个模块之间创建一个“软”链接，告诉 Webpack 当前模块可能需要另一个模块，但它可以放在一个单独的块中，以便稍后在需要时加载。例如，您可能只需要Foo在少数不寻常的情况下，如果您需要该模块，则可以等待Foo可用。在运行时，将在import()调用函数时加载块。

import()返回一个承诺，当块中的模块可用时将解决。您将需要等待承诺解决：const Foo = await import("Foo");或import("Foo").then(function(Foo){ /* ... */ })

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

因此，为了清楚起见：

模块 A：

import B from "B"

async function loadOptionalFeature() {
  const C = await import(
    /* webpackChunkName: "optional-chunk" */
    "C"
  );
  // ...
}

模块 B：

import D from "D"

模块 C：

import D from "D"
import E from "E"

A是我的入口文件。Webpack 将构建一个包含A. 因为A有一个硬链接B，所以B也会包含在核心块中。因为B有一个硬链接D，所以D也会包含在核心块中。

A有一个“软”链接C，所以 webpack可以分成C自己的块（可能有可用的配置选项）。C具有指向 的“硬”链接D，但D已包含在核心块中，因此不包含在optional-chunk. C还有一个“硬”链接E，因为E它不包含在核心块中，所以它包含在optional-chunk.