当入口文件和块位于不同域时，如何设置 Vite 配置以进行动态导入（代码分割）？

Question

我正在寻求帮助来解决独特部署设置（Vue + Vite + Shopify 应用程序）中的一些代码分割问题。

背景和设置

• 我有一个 Vue 应用程序，可以在页面上动态加载和渲染内容块（例如来自 CMS）。例如，如果页面包含轮播块和文本块，则每种块类型都有一个

  <component :is=“…” />

  。
• 有多种块类型，我不想将它们放在一个包中，因此我在块 SFC 上进行了一些代码拆分。所以我的入口文件中有这样的东西来异步导入这些全局......

blockTypes.forEach((blockType) => {
  app.component(
    blockType,
    defineAsyncComponent(() => import(`./blocks/${blockType}.vue`))
  )
})

• 我正在使用 [电子邮件受保护]。、[电子邮件受保护]、@vitejs/[电子邮件受保护]

到目前为止，当我完全控制部署时，这一切都相当简单。

进入Shopify开发

这就是棘手的地方。

Vue 应用程序部署为 Shopify 应用程序的 Shopify 主题扩展块。这里相关的主要事情是 Shopify 处理部署并设置一些约束。

1. 所有资源必须位于一个平面

   /assets/

   文件夹中（我在 vite 配置中使用了这部分）
rollupOptions

HTML 的域名是

3. rollupOptions: {
       input: './src/main.ts',
       output: {
         entryFileNames: 'assets/genesis-block.js',
         chunkFileNames: 'assets/[name]-[hash].js',
         assetFileNames: 'assets/block.[ext]'
     }
   }

   ；但资产被放在 CDN

   [some-store].myshopify.com

   上（并且

   cdn.shopify.com/extensions/[theme_extension_uuid]/assets/*

   在构建时未知）。

此外，资产 URL 在注入 html 时包含一个缓存破坏器参数，如下所示......
4. theme_extension_uuid

现在加载页面时......事情变得很奇怪：

脚本标签加载入口文件（带有缓存破坏程序参数）——当然，这会加载

• 然后入口文件尝试加载一个块，但是来自HTML域（不是CDN），这个404s
• 但不知何故，入口文件继续运行并加载相同的块，但现在来自 CDN 域 - 这有效 🤷
• 现在块本身引用条目文件，但没有缓存破坏器参数 - 所以这可以工作，但再次请求条目文件（不缓存）
• 看起来每个块都有成对的 404 + 200 响应
更糟糕的是，对于 CSS 块

第一个块加载正确（因为它是在 HTML 中指定的）

• 但是对于动态加载的 CSS，这些仅是从 HTML 域请求的 - 所以这些只有 404
我收到了每个 404 的控制台错误，并且网络选项卡中有很多红色。

（入口文件是'gen-block.js'） 这种情况如何配置？

这是一个 vite 或 @vitejs/plugin-vue 问题，还是我应该通过汇总选项解决的问题？我不知道如何继续前进。

我也在vite repo中提出了这个问题

讨论

在本地运行应用程序时效果很好。主要问题是当部署在不同的域（构建时未知的路径）作为窗口位置时。

---

我尝试了使用

cdn.shopify.com/extensions/[theme_extension_uuid]/assets/index.js?v=1726188069

拆分代码的不同方法，以及 vite 配置中的不同 rollupOptions。

Answer 1

defineAsyncComponent功能

。对此处概述的代码进行了一些尝试和错误，但看起来我让它适用于 JS 和 CSS 块。

renderBuildUrl

然后为了解决入口文件的缓存清除问题，我创建了一个简单的代理模块来在运行时获取 CDN URL 并导入入口文件。所以这个代理是从脚本标签加载的，而不是入口文件。

// vite.config
experimental: {
  renderBuiltUrl(filename, { hostType }) {
    if (hostType === 'js') {
      return {
        runtime: `window.__toCdnUrl(${JSON.stringify(filename)})`
      }
    } else {
      return { relative: true }
    }
  }
},