DEV Community
·
Importmap还是jsbundling？我两者都用
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
从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进行模块导入。
- 这种方法虽然打破了无构建的期望，但仍然利用了细粒度缓存，适用于复杂依赖的处理。
🏷️
标签
➡️
