DEV Community
·
Importmap还是jsbundling？我两者都用
内容提要
从Rails 7开始，Importmap成为默认的JavaScript加载方式，利用HTTP/2的并行下载和缓存。对于复杂的JS库，可以结合jsbundling和Importmap：先用jsbundling打包依赖，再用Importmap导入。这种方法解决了Importmap处理复杂依赖的问题，并保持了缓存优势。
关键要点
-
从Rails 7开始，Importmap成为默认的JavaScript加载机制。
-
Importmap利用HTTP/2的并行下载和缓存机制，避免每次更改时都下载所有代码。
-
Importmap提供了pin功能，可以将JS文件从CDN下载并配置到项目中。
-
某些JS库假设开发者会使用打包工具，导致源代码分散在多个文件中。
-
使用Importmap pin时，可能会遇到依赖不完整的问题，尤其是对于Lit库。
-
可以通过先使用jsbundling打包依赖，再用Importmap导入的方式解决复杂依赖问题。
-
需要修改Rails项目的配置以解决jsbundling和Importmap的冲突。
-
创建app/javascript/src/文件夹并添加lit.js文件以导出Lit库。
-
通过yarn安装lit包，并在config/importmap.rb中添加相应配置。
-
整个工作流程是esbuild编译源代码，处理后通过Importmap进行模块导入。
-
这种方法虽然打破了无构建的期望，但仍然利用了细粒度缓存，适用于复杂依赖的处理。
延伸解读
Importmap的优势与局限
Importmap利用HTTP/2的并行下载和缓存机制，能够有效减少每次更改时的下载量。然而，对于某些复杂的JavaScript库，Importmap可能无法处理所有依赖，导致导入不完整。因此，在使用Importmap时，开发者需要注意其适用范围，尤其是对于依赖较多的库。
结合使用jsbundling的策略
为了克服Importmap在处理复杂依赖时的局限，文章建议先使用jsbundling打包依赖，再通过Importmap导入。这种方法虽然打破了无构建的期望，但仍然能利用细粒度缓存，适合需要处理复杂依赖的项目。开发者在实施时需注意配置的冲突问题。
配置与实施注意事项
在将jsbundling与Importmap结合使用时，开发者需要仔细修改Rails项目的配置，以避免冲突。例如，需调整package.json和application.rb文件中的路径设置。此外，确保正确创建和配置app/javascript/src/文件夹，以便顺利导入所需的JavaScript库。
延伸问答
Importmap是什么，它的主要功能是什么？
Importmap是Rails 7开始默认的JavaScript加载机制，主要功能是利用HTTP/2的并行下载和缓存，避免每次更改时都下载所有代码。
如何解决Importmap在处理复杂依赖时遇到的问题？
可以通过先使用jsbundling打包依赖，再用Importmap导入的方式来解决复杂依赖问题。
使用Importmap时可能遇到哪些问题？
使用Importmap时可能遇到依赖不完整的问题，尤其是对于某些JS库，如Lit库，可能会导致导入失败。
如何在Rails项目中配置jsbundling和Importmap？
需要修改Rails项目的配置，移除冲突的javascript_include_tag，并在package.json和config/application.rb中进行相应的修改。
Importmap的pin功能有什么用？
Importmap的pin功能可以将JS文件从CDN下载并配置到项目中，方便管理和使用外部依赖。
使用esbuild和Importmap的工作流程是怎样的？
工作流程是esbuild编译源代码，处理后通过Importmap进行模块导入，确保模块可以在应用的JS代码中被导入。
