How to use Vite with CDN

// learned from vite source code
const dynamicBaseAssetsCode = `
globalThis.__toAssetUrl = url => './' + url
`

function createCDNPlugin(cdnPrefix = '') {
  return {
    name: 'vite-plugin-cdn-transform-html',
    transformIndexHtml(html, ctx) {
      // add crossorigin to css bundle, you may not need to this
      // I submited a PR https://github.com/vitejs/vite/pull/12991, it hasn't been merged yet.
      const htmlContent = html.replace(
        /<link rel="stylesheet" (href=".+?\.css")>/gm,
        '<link rel="stylesheet" crossorigin $1>',
      );
      if (ctx.bundle) {
        // Only inject during build
        const tags = [
          {
            tag: 'script',
            children: dynamicBaseAssetsCode,
          },
        ];
        return {
          html: htmlContent,
          tags,
        };
      }
    },
  };
}

// additional comments added for better understanding.
const viteConfig = {
  experimental: {
    renderBuiltUrl(filename: string, { hostId, hostType, type }: { hostId: string, hostType: 'js' | 'css' | 'html', type: 'public' | 'asset' }) {
      // CDN deploy can be turn off if VITE_CDN_PREFIX not set.
      if (!process.env.VITE_CDN_PREFIX) {
        return filename;
      }
      // resource in public directory, use relative path to support subpath deployment, http://example.com/subpath. 
      // see https://vitejs.dev/guide/assets.html#the-public-directory for details.
      if (type === 'public') {
        return './' + filename;
      } else if (path.extname(hostId) === '.js') {
        // dynamic resources used in javascript chunk.
        // <video src="../assets/imgs/guid/4.mp4" />
        // <img src="../assets/imgs/chatdoc.png" />
        // import wasm from 'somepackage/demo.wasm?url';
        const extsCopiedToCdn = ['.wasm', '.png', '.mp4', '.svg'];
        if (extsCopiedToCdn.includes(path.extname(filename))) {
          return process.env.VITE_CDN_PREFIX + filename;
        }
        
        // the object syntax can only be used when hostType is 'js'
        // 'runtime' means the final result will be converted to a function call,
        // so you must make sure `window.__toAssetUrl` is bind to window namespace, and can resolve asset url successfully,
        // the `vite-plugin-cdn-transform-html` use `transformIndexHtml` hook to inject the `window.__toAssetUrl`.
        return {
          runtime: `window.__toAssetUrl(${JSON.stringify(filename)})`,
        };
      } else {
        // hostType is html or css
        // html means auto-injected js and css chunks
        return process.env.VITE_CDN_PREFIX + filename;
      }
    }
  },
  plugins: [
    createCDNPlugin()
  ]
}