README.md in importmap-rails-0.2.2 vs README.md in importmap-rails-0.2.3

- old
+ new

@@ -54,10 +54,37 @@ ```js import "trix" import md5 from "md5" console.log(md5("Hash it out")) -``` +``` + + +## Preloading pinned modules + +To mitigate the waterfall effect where the browser has to load one file after another before it can get to the deepest nested import, we use [modulepreload links](https://developers.google.com/web/updates/2017/12/modulepreload) in [browsers that support it](https://caniuse.com/?search=modulepreload). Pinned modules are preloaded by default, but you can turn this off with `preload: false`. + +Example: + +```ruby +# config/initializers/importmap.rb +Rails.application.config.importmap.draw do + pin "trix", to: "https://cdn.skypack.dev/trix" + pin "md5", to: "https://cdn.skypack.dev/md5", preload: false +end + +# app/views/layouts/application.html.erb +<%= javascript_importmap_tags %> + +# will include the following link before the importmap is setup: +<link rel="modulepreload" href="https://cdn.skypack.dev/trix"> +... +``` + + +## Caching the import map and preload modules + +The import map should be cached in production, and is so by default via the `config.importmap.cached` option that will be set to the same value as `config.action_controller.perform_caching`, unless explicitly set differently. ## Expected errors from using the es-module-shim While import maps are native in Chrome and Edge, they need a shim in other browsers that'll produce a JavaScript console error like `TypeError: Module specifier, 'application' does not start with "/", "./", or "../".`. This error is normal and does not have any user-facing consequences.