单个文件中的JavaScript命名空间模块与导入/导出加载的模块（如requireJS、es6）

我正试图找出在我们的网站中构建模块的最有效方法，该网站已经在一个文件（app.js）中包含了大量JavaScript名称空间模块

目前情况有点像这样：

app.js

OURAPP.mapsModule = (function() {
  return ...
})();
...
OURAPP.searchModule = (function() {
  return ...
})();

...
OURAPP.searchModule.search(query);
...

export default {
    ...
}

import searchModule from "./js/searchModule";
...
searchModule.search(query);
...

…这些都包含在一个文件中。因此，当我们想要使用这些模块时，我们：

搜索页面.js

OURAPP.mapsModule = (function() {
  return ...
})();
...
OURAPP.searchModule = (function() {
  return ...
})();

...
OURAPP.searchModule.search(query);
...

export default {
    ...
}

import searchModule from "./js/searchModule";
...
searchModule.search(query);
...

search.html

...
<script src="js/main.js">
<script src="js/search-page.js">
...

搜索页面.js

OURAPP.mapsModule = (function() {
  return ...
})();
...
OURAPP.searchModule = (function() {
  return ...
})();

...
OURAPP.searchModule.search(query);
...

export default {
    ...
}

import searchModule from "./js/searchModule";
...
searchModule.search(query);
...

---

我猜测，一个文件命名的模块将更快的页面加载（？）因为它只有一个文件下载。但是，当我研究测试框架（例如Jest）时，它们给出了许多以这种方式加载模块脚本文件的示例。我想知道它是否更适合测试？就我个人而言，我更喜欢这种结构，但这是一个大胆的方向改变，从如何建立网站到现在，我需要一个很好的理由来建议这一点。这个网站几乎都是在服务器端生成的，JavaScript只是执行显示/隐藏、查询API等操作，并在每个页面需要时添加scrips和JavaScript库，如jQuery、Bootstrap和同位素

---

我读了很多书，但没有找到任何东西能准确地比较这两种方法，也没有找到支持或反对这两种方法的理由。如果您有任何建议或有用的建议，将不胜感激。

不要默认导出对象，请使用命名导出：

// searchModule.js
export function search(…) {
  …
}

我猜测，一个文件命名的模块将更快的页面加载，因为它只是一个文件下载

是的，没错。但是，不要让这影响您对如何构建模块的决定。您应该始终对代码进行模块化，使其尽可能干净。将“地图”内容放在与“搜索”内容不同的模块中

然后，您将使用bundler或packer工具创建一个要下载的小型JS文件，其中包含相应页面所需的所有模块