[ Bug ]: vite 模板 blocklet deploy后, 不支持动态加载 modulepreload 包

[FireTable]

问题

在 tweet-token 迁移到vite时候发现
目前在vite中, 如果用了 React.lazy / vite自带的 import.meta.glob 语法

dynamic import的包, blocklet deploy后, 会变成以下这样

<link rel="modulepreload" as="script" crossorigin="" href="/.blocklet/proxy/z8iZoLRKRXHzqdJ2vFZEi4H5UXT9ADsurxZRK/assets/admin.e7b77da7.js">

其中应该是 crossorigin="" / rel="modulepreload" 属性影响vite加载包的功能, 导致无法加载dynamic的包

查看network发现, 并没有附带 header.referer 参数, 导致被 blocklet-server 拦截了

// 无referer test

// 有referer test

• 现状: 只能用单文件打包方式

解决思路

1. blocklet server 不拦截 header.referer === undefined
   • 与晨哥沟通后, 发现 referer 参数是需要的, 不能这样玩
2. 配置vite项目
   • 
   • 也有其它人的 issue 需要这个功能: allow use-credentials of crossorigin attribute vitejs/vite#6648

为什么没进行下去

在翻 vite 文档的时候, 发现英文文档 5小时前 更新了一个参数 build.modulePreload.resolveDependencies, 感觉有戏

所以先做问题记录, 后续再做修复

[FireTable]

@LancelotLewis : 发现使用 link modulepreload 加载 js 文件天然就没有 referer, 使用内测版似乎就能解决问题了

坐等 vite3.2 更新 build.modulePreload 属性

[FireTable]

vitejs/vite#9938

vite 相关 PR

[LancelotLewis]

在 3.2 beta 中设置 build.modulePreload: false 禁用掉 modulepreload 可以成功

[LancelotLewis]

发现使用 link modulepreload 加载 js 文件天然就没有 referer

是 chrome 内核的 bug，firefox 实测没有问题

在 chrome 下的表现是 link modulepreload 加载 css 有带 referer，加载 js 文件不带 referer
而在 firefox 下的表现是 link modulepreload 加载 css 和 js 都会携带 referer

考虑到 modulepreload 在不同浏览器下的实现是不统一的，所以禁用 modulepreload 可能是目前最省心的选择

[FireTable]

军哥的 vcm 也遇到同样的问题

后续支持后, 需要通知 vcm / tweet-token

[LancelotLewis]

3.2.0 发布了
https://github.com/vitejs/vite/releases/tag/v3.2.0

[yumanman88]

请问，这个修改modulepreload的crossorigin是已经在3.2.0实现了吗

[FireTable]

请问，这个修改modulepreload的crossorigin是已经在3.2.0实现了吗

https://cn.vitejs.dev/config/build-options.html#build-modulepreload ✅

[LancelotLewis]

请问，这个修改modulepreload的crossorigin是已经在3.2.0实现了吗

@yumanman88
在新版的 blocklet-server，不再对静态资源有 referer 限制，所以目前不需要修改 build.modulePreload 也可以实现正常加载拆包的应用