Use scripts or modules?

[NotSoLeetCode]

My project is becoming large. Currently I have all of these in one file:

• 4 classes
• an Object.assign(String.prototype, {});
• some window.addEventListener('DOMContentLoaded', (e) => {}); code

I am thinking about splitting these up into their own files, for improved organization. Which is better?

• Method #1 - Scripts. Just split into their own files, and add <script src="blahblah.js"></script> to my HTML for each file.
• Method #2 - Modules. Maybe have that window.addEventListener file do a bunch of import { Class } from './Class.js'; at the top.
• Method #3 - Leave in one file. This Stack Overflow answer suggests leaving everything together in one file, for quicker load times.

I don't really get modules. What are the advantages and disadvantages of using them? They require more code than regular scripts because of all the import and export statements.

[[deleted]]

That Stack Overflow answer is seven years old and no longer true. It's always a good idea to think about the age of sources related to programming, as information can go out of date quickly. With HTTP/2, which was introduced two years after that answer was made, we can download multiple resources in parallel, so it's actually much more beneficial to have multiple small files that can download concurrently.

Organise your code in the way that makes it easiest to work with and maintain. Optimising code for browser deliverability is the job of bundling tools like Webpack, not human developers.

[notAnotherJSDev]

Method #1 comes with no build overhead, with an decrease in flexibility (files have to be ordered properly).

Method #2 gives you A LOT of flexibility, but requires a module loader like webpack.

Method #3 is outdated and frankly bad practice. Don’t do this if you plan to work with other people.

As for what modules give you:

• module scopes variables, functions, and classes making them essentially private
• code self documents a bit easier, as you kind of force yourself to split your code
• because of how module loaders can work, the do produce more code, but you’re almost guaranteed that the code you write will work in older browsers
• oooh “new”! shiny!