资产与后台任务

这一课你将能做到

1. 说清楚 Rails 7 资产方案（Propshaft + Importmap）如何免打包加载 JS/CSS
2. 写一个 Active Job 后台任务并用 Solid Queue 跑起来
3. 判断什么该进后台队列，并配置失败重试

为什么要学

两件事：第一，Rails 7 彻底告别了 Webpacker 时代——现在默认「不打包」，浏览器原生 ES Module + Importmap 直接加载 JS，这是现代前端观念在 Rails 的落地，和本站 Next.js 的重打包路线形成鲜明对照。第二，任何真实应用都有「不能让用户等」的操作：发邮件、生成报表、同步第三方——这些必须进后台队列，否则一个慢操作拖垮整个 Web 进程。

先建立图像

资产管道（前端）
app/assets/stylesheets ─┐
app/javascript          ├─► Propshaft（指纹+服务）─► 浏览器原生加载
vendor/javascript       ─┘   Importmap 声明依赖映射

后台任务（后端）
Web 进程：  请求进来 → SomeJob.perform_later ─► 队列表（数据库）
                                                   │
Queue 进程：solid_queue 轮询 ◄──────────────────────┘
              │
              ▼
         执行任务 → 成功 / 失败重试

Rails 8/7.2 的默认队列后端 Solid Queue 把任务存在数据库表里，不需要 Redis——中小项目又省一个中间件。

跟着做

步骤 1：理解 Importmap 工作方式

config/importmap.rb：

pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin_all_from "app/javascript/controllers", under: "controllers"

布局里的 <%= javascript_importmap_tags %> 生成：

<script type="importmap">
{"imports": {"application": "/assets/application-abc123.js", ...}}
</script>
<script type="module">import "application"</script>

浏览器拿到 importmap 后按 ES Module 原生机制加载，文件名带内容指纹（abc123）实现永久缓存 + 更新即失效。加新库不用打包：

bin/importmap pin lodash
# importmap.rb 多一行 pin "lodash"，JS 里直接 import _ from "lodash"

步骤 2：Stimulus 写一个交互

bin/rails generate stimulus clipboard

// app/javascript/controllers/clipboard_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["source"]

  copy() {
    navigator.clipboard.writeText(this.sourceTarget.value)
  }
}

HTML 里用 data 属性挂接：

<div data-controller="clipboard">
  <input data-clipboard-target="source" value="https://example.com/article/1" readonly>
  <button data-action="clipboard#copy">复制链接</button>
</div>