Published at
Updated at
Reading time
2min

Have you heard of the new script type "importmap"? Import maps aren't listed in the MDN script element compatibility data yet, but according to caniuse.com, Chromium ships them, and Firefox implements them behind a feature flag.

Caniuse importmap support table

Import maps will simplify frontend tooling. ๐ŸŽ‰ If you ship ES modules (ESM), the new script type enables you to rewrite ugly, complicated, and absolute file paths to file path identifiers.

<script type="importmap">
{
  "imports": {
    "dayjs": "https://cdn.skypack.dev/dayjs@1.10.7",
  }
}
</script>
<script type="module">
  import dayjs from 'dayjs';

  // do stuff with 'dayjs'
</script>

But making imports easier to write isn't the only benefit of using import maps!

Import maps enable longer cache duration

Ayooluwa Isaiah published a handy guide explaining import maps, and it includes a nice little tip that I haven't considered before.

Suppose you ship an ESM-based production app following all the best practices: your code is minified, bundled and code-splitted.

JavaScript files load other files, which then load more files. And, of course, you want to cache all files as long as possible, and that's why you ship hashed files (a-file.affsd892mds.js). With unique file names, you can cache all your files forever!

But there's one downside. Let's consider a dependencies tree resulting in this request waterfall.

main.982jda.js
|_ module.a93mwld.js
   |_ dep.has83ks.js

All the files include hashed import statements.

// main.js
import { module } from './module.a93mwld.js';

// module.js
import { dep } from './dep.has83ks.js';

What happens now when you update a dependency deep down in your module tree? All the file hashes change! ๐Ÿ˜ฒ Even if all the other files are the same, a single dependency change invalidates all the file paths going up the dependency chain.

If, on the other hand, your files are based on import maps and identifiers, you can update a file path in a single location, and no other file needs to be touched.

<script type="importmap">
{
  "imports": {
    "main": "./main.982jda.js",
    "module": "./module.a93mwld.js",
    "dep": "./dep.has83ks.js"
  }
}
</script>

There's no change when a dependency was updated! ๐Ÿ‘ ๐Ÿ‘‡

// main.js
import { module } from 'module';

// module.js
import { dep } from 'dep';

This is pretty sweet and I can't wait to see it in action!

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more WebDev shenanigans. The last edition went out 11 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles