Grouping javascript files with Rails 7 Import Maps
Rails 7 introduced import maps as the new default way to manager javascript. To quote the readme from importmap-rails:
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. 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.
The readme gives a nice overview of how import-map works with the browser and why it's so much faster for developing website with javascript.
After implementing this website with Rails 7 and the new default import-map and deploying to Heroku, I ran it through Google's page speed test to look for feedback. I quickly found that most of the javascript on the page was only necessary for authoring features and was unnecessarily for displaying what I had written.
After a dive into the gem's source code some short experimentation, I found what I was looking for: a way to group separate sets of javascript files for the admin and the public portions of this apps. A word of caution: there is only import map for your entire app. This will allow you to selectively "require" javascript files for different pages on your site. It will not affect the content of the script-importmap tag.
After implementing this website with Rails 7 and the new default import-map and deploying to Heroku, I ran it through Google's page speed test to look for feedback. I quickly found that most of the javascript on the page was only necessary for authoring features and was unnecessarily for displaying what I had written.
After a dive into the gem's source code some short experimentation, I found what I was looking for: a way to group separate sets of javascript files for the admin and the public portions of this apps. A word of caution: there is only import map for your entire app. This will allow you to selectively "require" javascript files for different pages on your site. It will not affect the content of the script-importmap tag.
The magic feature is the entrypoint. The entrypoint is the script tag loads the other script for the page. The default value of this file is `application.js`, but importmaps-rails let you override this by passing in your own value. I decide to split out an admin.js that I would only load on admin pages.
So on application.html.erb, I have the following in the <head> section:
<%= javascript_importmap_tags %>
And in my admin.html.erb, I similarly have:
<%= javascript_importmap_tags entrypoint='admin' %>
If you have more than one `javascript_importmap_tags` in the page, then the `"imports": { ... }` block will be repeated on the page. I found it more idomatic to maintain separate admin and main site javascript files.
After splitting my entrypoints, the page speed test results boosted up and this site now only loads the required javascript for the public version of this site. Neat!