ruby-on-rails 如何在Rails7中生成带有导入子集的importmap标记?

mqkwyuun  于 2023-04-22  发布在  Ruby
关注(0)|答案(2)|浏览(140)

我目前使用的是来自标准importmap-rails gem的javascript_importmap_tags助手,它为固定在config/importmap.rb中的 everything 生成一个标记,并为 every page 执行此操作。(非常)孤立的部分我的网站,但它似乎没有这种能力。(限制导入的内容很简单,但Map本身仍然不必要地很大,包括整个网站可能导入的所有内容。
理由:我的importmap有超过300个条目,其中大部分是针对我的站点特定的javascript模块。在站点内,几乎所有这些模块都可以被分组为完全独立的“应用程序”。限制条目的数量是值得一点努力的,即使只是为了在调试时可以查看的内容较少。但是,一般来说,我想把东西隔离开来,把单个组件做得更小,因为如果有更少的部件,大多数东西就不太可能坏,而且把它们做得更简单往往比弄清楚它们变大、变复杂是否是个问题更容易。
1.如何在不偏离默认设置太远的情况下做到这一点呢?现在我试图通过创建一个javascript_importmap_tags_for助手来实现这一点,该助手通过调用javascript_inline_importmap_tag来模仿内置的javascript_importmap_tags,但提供给该方法的实际Map列表通常来自Rails.application.importmap,它是在服务器从config/importmap. rb启动时创建的。我只是不知道如何创建多个导入Map对象,或者创建一个带有命名组的importmap对象,而不会过多地干扰它当前的工作方式。文档告诉你如何从多个importmap组合一个importmap。rb文件,我已经尝试过了,但它似乎没有帮助,我不认为它是为了这个。
1.我应该尝试这样做吗?(以这种方式限制导入Map是否会潜在地导致问题,和/或我是否在浪费精力或添加更多的复杂性来试图打破它,而不是通过在给定页面上使导入Map更简单来删除它?)

ccgok5k5

ccgok5k51#

它还不是为此而设计的,我担心你会错过一些Rails缓存,如果内部API改变了,你就必须更新它。

是否担心所有请求都加载了不需要的JS文件?

只有在加载的代码中实际加载了艾德或在importmap.rb中实际加载了preload: true的模块才会被加载(即使它们显示在importmap中)。(或其他JS)不会导入,否则modulepreload不会被浏览器下载和使用。所以一般来说,导入Map中有未使用的条目 * 不是问题。它可能感觉不完美甚至混乱,但导入Map本身的位数可能低于您网站上的大多数图像。
也许值得开一个问题来探讨是否愿意添加这个.同时我建议打破导入Map,这样你就可以为你的网站 * 部门 * 定制你的预加载.
首先尽可能地将preload: true最小化为真正的全局模块。
然后在布局中将<%= javascript_importmap_tags %>替换为它扩展到的内容:

<%= javascript_inline_importmap_tag %>
    <%= javascript_importmap_module_preload_tags %>
    <%= javascript_importmap_shim_nonce_configuration_tag %>
    <%= javascript_importmap_shim_tag %>
    <%= javascript_import_module_tag "application" %>

最后,在你的应用的特定部分,你想预加载一些更多的模块以加快速度,手动添加这些标签,如下所示:

<%= javascript_module_preload_tag(Rails.application.importmap.packages["d3-color"].path) %>
    <%= javascript_module_preload_tag(Rails.application.importmap.packages["d3-time"].path) %>

你可能也想content_for :head那些,除非你也有多个布局。

xe55xuns

xe55xuns2#

技术上是可行的:

# app/assets/config/manifest.js
//= link_tree ../../javascript_two .js

# config/importmap_two.rb
pin_all_from "app/javascript_two"
# config/initializers/*.rb

map = Importmap::Map.new
map.draw(Rails.root.join("config/importmap_two.rb"))
map.cache_sweeper(watches: Rails.root.join("app/javascript_two"))
Rails.application.config.assets.paths << Rails.root.join("app/javascript_two")
Rails.application.class.attr_accessor(:importmap_two)
Rails.application.importmap_two = map
ActiveSupport.on_load(:action_controller_base, run_once: true) do
  before_action { Rails.application.importmap_two.cache_sweeper.execute_if_updated }
end
>> puts helper.javascript_inline_importmap_tag(Rails.application.importmap_two.to_json(resolver: helper))
<script type="importmap" data-turbo-track="reload">{
  "imports": {
    "another_app": "/assets/another_app-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js"
  }
}</script>
=> nil
>> puts helper.javascript_inline_importmap_tag(Rails.application.importmap.to_json(resolver: helper))
<script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-15b16d6dc392d96a0dcc6e30c1f41abb496a3170c9c486de35da876ab020eadf.js"
  }
}</script>
=> nil

相关问题