ES6 import a file in multiple place, why the file loads once?

Question

If there has a common file named common.js, and others such as a.js, b.js...

common.js

const Common = { property: 'initial' }
export { Common };

a.js

import { Common } from 'common.js';
Common.property = 'changed';

b.js

import { Common } from 'common.js';
console.log(Common.property);

First, a.js runs and load the common.js into memory.

Then, b.js run by engine.

1. Does the common.js will load again or use the existing common.js in the memory?
2. If common.js was updated by other xx.js script, how will the import behave?

Answer 1

I'm assuming you are using Node.js so the import will turn into require statements after transpiling.

From the docs:

Modules are cached after the first time they are loaded. This means (among other things) that every call to require('foo') will get exactly the same object returned, if it would resolve to the same file.

Source

To answer you questions explicitly:

1. The module is cached so you are changing the same object
2. It will print the the last value assigned
   • for example changed if a.js was executed
   • if only b.js is executed, then it will print initial

Try it out online here.