title: Importing a variable makes it parsed before condition gets checked and variable gets called
body: <p>I have split my JS into several files, to make my life easier since the file was getting over 500 lines.
  At the beginning of my main feature.js I check if "feature" is present on the page. So I know that all of "feature" DOM elements are present. If it is, then it should keep parsing further. Such as:</p>
  
  <pre><code>import { valuesStored } from '../values.js';
  
  const feature = document.querySelector('#feature')
  
  if (feature.length) {
  // parse my code
  // some functions calling (valuesStored)
  }
  </code></pre>
  
  <p>On another file I have some variables, for instance some object in which I stored values from DOM identifiers, such as:</p>
  
  <pre><code>export let valuesStored = {
    itemA: document.getElementById('itemA').value
  }
  </code></pre>
  
  <p>When, at first, I used to have my variable declared within the if statement then everything was fine</p>
  
  <p>But now that I have stored it in another file, and I am importing it, it seems that values.js  and valuesStored variable get parsed everytime, before being called, even on pages where "feature" is not present. And it therefore throws an error, since document.getElementById('itemA') is not present and therefore document.getElementById('itemA').value throws error.</p>
  
  <p>How could I solve this?
  I basically would like the JS files I created to be parsed only when called, not before, to both avoid throwing error like this AND to maybe improve performance (by lowering the JS parsing).</p>
  
  <p>Thanks</p>