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

Question

I'm trying to figure the most efficient way to structure modules in our website that contains a lot of JavaScript namespaced modules in a single file (app.js) already.

Currently things look a bit like this:

app.js

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

..and these are all contained within a single file. So, when we want to use any of these modules we:

search-page.js

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

search.html

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

---

We do have a lot of such modules. However, I'm wondering whether we should be doing something with import/export modules:

Method #2

searchModule.js

export default {
    ...
}

search-page.js

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

---

I'm guessing that a single file namespaced modules will be faster for the page to load(?) as it's only a single file to download. But when I'm looking at testing frameworks (eg Jest) they give many examples where module script files are loaded in this manner. Does it lend itself better to testing I'm wondering? Personally, I prefer this structure anyway but it's a bold change of direction from how the site has been built up until now and I'll need to good reason to suggest this. This website's is pretty much all generated server-side with JavaScript just doing the show/hide, query APIs, etc, with the addition on scrips and JavaScript libraries such as jQuery, Bootstrap, Isotope when required on each page.

I've read around but can't find anything comparing exactly both methods here and reasons for and against either. Would appreciate any suggestions or helpful advice, thanks.

Answer 1

Don't default-export objects, use named exports instead:

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

// search-page.js
import * as searchModule from "./js/searchModule";
…
searchModule.search(query);
…

I'm guessing that a single file namespaced modules will be faster for the page to load as it's only a single file to download.

Yes, that's true. However, do not let that affect your decision on how to structure your modules. You should always modularise your code so that it is the cleanest possible. Put the maps stuff in a different module than the search stuff.

You will then use a bundler or packer tool to create a single minified JS file to download that contains all the modules that the respective page needs.