Today I Learned - Rocky Kev

TIL ES modules and dynamic imports

POSTED ON:

TAGS: javascript es-modules

ES Modules allow us to separate JS code into separate files, aka 'modules'.

We can now do this on the browser. (as long as you identify the script tag as a module type)

import { concat } from './concatModule.js';

concat('a', 'b'); // => 'ab'

Did you know we can also dynamically load modules based on conditionals?
The import(path) returns a promise, it fits great with the async/await syntax.

// loading it normally
const module1 = await import('./myModule.js');


// loading it as a promise
async function execBigModule(condition) {
  if (condition) {
    const { funcA } = await import('./bigModuleA.js');
    funcA();
  } else {
    const { funcB } = await import('./bigModuleB.js');
    funcB();
  }
}


loadMyModule();

via How to Dynamically Import ECMAScript Modules

Related TILs

Tagged: javascript

TIL what is npm Script

Despite their high usage they are not particularly well optimized and add about 400ms of overhead. In this article we were able to bring that down to ~22ms.

TIL fancy methods to transform Javascript Objects

You can use Object.entries(), Object.keys(), Object.fromEntries()...

TIL how to hide your JS code

ONE THING TO NOTE: Encrypting a script is stronger than obfuscation, both methods are still not adequate to protect secret content. Honestly, I don't think it's worth it on a production site, and instead just go with pure server-side if you want security. But it's fascinating.