# Importmap for Rails

[Import maps](https://github.com/WICG/import-maps) let you import JavaScript
modules using logical names that map to versioned/digested files - directly
from the browser.  So you can [build modern JavaScript applications using
JavaScript libraries made for ES modules (ESM) without the need for
transpiling or
bundling](https://world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755).
This frees you from needing Webpack, Yarn, npm, or any other part of the
JavaScript toolchain.  All you need is the asset pipeline that's already
included in Rails.

With this approach you'll ship many small JavaScript files instead of one
big JavaScript file.  Thanks to HTTP/2 that no longer carries a material
performance penalty during the initial transport, and in fact offers
substantial benefits over the long run due to better caching dynamics.
Whereas before any change to any JavaScript file included in your big bundle
would invalidate the cache for the whole bundle, now only the cache for that
single file is invalidated.

[Import maps are supported natively in all major, modern
browsers](https://caniuse.com/?search=importmap).  If you need to work with
legacy browsers without native support, you can explore using [the shim
available](https://github.com/guybedford/es-module-shims).
