fac25 / week2-agencyProject-Patrick-Sumithra

0 stars 0 forks source link

Avoid unneeded indirection #19

Closed oliverjam closed 2 years ago

oliverjam commented 2 years ago

A lot of your JS code is hidden behind imports and separate files. It's a good thing to modularise your codebase and keep things organised like this, but try not to do it prematurely. Otherwise you can end up with a simple codebase that feels more complex than it is because of the indirection.

E.g. all these imports:

https://github.com/fac25/week2-agencyProject-Patrick-Sumithra/blob/b420506ab9c4d70a3260ffd79bd65db334226ba2/scripts/main.js#L1-L2

https://github.com/fac25/week2-agencyProject-Patrick-Sumithra/blob/b420506ab9c4d70a3260ffd79bd65db334226ba2/scripts/Contact/index.js#L1-L2

could probably just go directly in the index.html.

This will actually improve your performance, as right now the browser won't see the imports straight away. It has to load main.js, follow those imports, find Contact/index.js, follow those imports, then download the required JS files. This creates what's known as a "waterfall" loading effect. Ideally you want all your code to be discovered upfront so it can be loaded in parallel.

<script type="module">
  import "./Navbar/nav.js"; 
  import "./Contact/Modal.js"; 
  import "./Contact/Form.js";
</script>