Rails 7 和 importmaps：我的 javascript 被分成許多文件，在生產環境中會發生什么情況？

Question

我正在將 heroku 托管網站從 Rails 5 升級到 Rails 7。我使用的是 webpacker，但由於它已被棄用，我決定改用 importmaps。 我的站點有很多javascript，主要是一堆游戲/玩具/實驗。 javascript 非常面向 object。 每個游戲/玩具/實驗都使用很多類，其中很多都非常小，每個 class 都在自己的文件中，使用 es6 樣式導入：“從'./something'導入一些東西”。

在升級之前，在生產和開發服務器上，墊片、轉譯和資產預編譯的某種組合會將這么多文件變成只有幾個文件。 我絕對不記得哪些工具在做什么，希望我不必記住，但這是升級前的 Gemfile：

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.6'

gem 'rails', '~> 5.2.2'
# Use Puma as the app server
gem 'puma', '~> 4.3' #'~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'
end



### Added manually


## Interface

# Style Defaults - Makes everything look good by default.
# Structure - Makes it easier to do almost everything you're going to do with the interface.
gem 'bootstrap'

# Templates - Makes templates easier to read and write.
gem 'haml'

# Forms - Makes forms not almost completely infuriating.
gem 'simple_form'

# Email
gem 'mailgun-ruby', '~>1.1.6'


## Database

# Postgres, which is good for text searching
gem 'pg'

# Bulk database insert
gem 'bulk_insert'

# Search (postgres specific)
gem 'textacular', '~> 5.0'


## Storage

# AWS S3 - For storage and retrieval of a lot of data cheaply.
gem 'aws-sdk-rails'
gem 'aws-sdk-s3'


## Javascript

# ES6 - Turns ES6 it into something that will work with all browsers.
gem "babel-transpiler"

# DOM - Makes the DOM much easier to deal with.
gem "jquery-rails"

# Modules - Allows use of separate files as modules and other things I can't remember
gem 'webpacker'


## Payments
# Stripe: Makes payments possible.
gem 'stripe', :git => 'https://github.com/stripe/stripe-ruby'


## Accounts
# Third Party Sign-In
gem 'omniauth-google-oauth2'
gem 'omniauth-facebook'

以下是升級后的一些變化：

# CHANGED: Upgraded from 2.6.6 to 3.1.2 to upgrade from heroku-18 to heroku-22.
ruby '3.1.2'

# CHANGED: Upgraded from 5.2.2 to 7.0.4 to upgrade from heroku-18 to heroku-22.
gem 'rails', '~> 7.0.4'

# removed these:
# gem 'mini_racer', platforms: :ruby
# gem 'bcrypt', '~> 3.1.7'
# gem 'mini_magick', '~> 4.8'
# gem 'capistrano-rails', group: development

...

gem 'bootstrap', '~> 5.2.1' # added version

現在我明白了以下幾點：

• importmaps 將從 CDN 加載所有不是我的庫，它會單獨加載它們，看起來它會做得很好。 我知道這一點是因為在此之前我實際上升級了另一個網站（但它自己的 javascript 較少）。

• 它會以某種方式加載我的 javascript。 如果我現在部署它，其中大部分可能會起作用，但是......

在開發過程中，發生了一些意想不到的事情，即我為這些類中的每一個創建的每個小文件 javascript 都被單獨加載，而且速度慢得令人討厭。 我知道它會單獨加載“頂級”類型的入口點模塊，但我認為模塊導入的模塊最終會以某種方式結束。 所以現在我有兩個問題：

1. 所有這些文件是否會在生產環境中單獨加載？ （或者它們會以某種方式單獨加載但速度很快嗎？）在我當前查看的頁面上，我的 javascript 文件中有超過 30 個正在加載。

2. （獎勵）我可以在開發中改進加載過程嗎？ 現在是可以容忍的，我真的需要為生產完成升級，而不是讓開發更容易處理，但如果能讓開發加載速度更快也更好。 關於它的一個好處是，如果它在開發中加載速度很快，我至少可以更有信心一點，它在生產中是可以的。

Answer 1

1. 所有這些文件是否會在生產環境中單獨加載？

是的，這個想法是將 importmaps 與具有流水線的HTTP2/HTTP3/QUIC一起使用，這消除了為每個文件創建連接的懲罰——多個文件不再是 HTTP2+ 的問題——反之亦然——編譯的大文件和圖像精靈是不好的現在。

2. 我可以在開發中改進加載過程嗎？

在開發中文件是通過 HTTP1.1 加載的，不幸的是，我現在不知道解決方案。 雖然如果使用 Stimulus 有一件很酷的事情——延遲控制器加載，你可以這樣做，如果你正在查看你的游戲/玩具/實驗之一的頁面，那么加載該特定實驗的 javascript 個文件，但不加載其他文件。