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 个文件，但不加载其他文件。