Webpack 只导入相互 JS 文件一次

Question

我有例如三个 JS 文件：

1. 实用程序.js
2. 文件1.js
3. 文件2.js

utils.js 的代码并不重要，它包含了一些常用的功能。 其他两个文件都导入了其中的一些，例如：

文件1.js

import { function1, function3 } from 'utils.js'

文件2.js

import { function1, function2 } from 'utils.js'

现在，当我在一个 html 中包含脚本 file1.js 和 file2.js 时：

<script type="text/javascript" src="/webpacked/file1.bundle.js"></script>
<script type="text/javascript" src="/webpacked/file2.bundle.js"></script>

utils.js 的内容被执行了两次（通过每个包）。 有可能抑制这种行为吗？ 当然实际上它更复杂，并且 utils.js 被执行了很多次。

PS：我试图使用某些条件来抑制 utils 函数的重新定义，例如

if (typeof window.function1 === 'undefined') {
    export function function1() {
        // do stuff
    }
}

但当然它不起作用，因为导出和导入必须是顶级的。

Answer 1

创建一个捆绑包并仅包含这一个捆绑包

<script type="text/javascript" src="/webpacked/file.bundle.js"></script>

您可以使用 Webpacks 的延迟加载将此捆绑包拆分为单独的模块并按需加载它们。