vite-plugin-dynamic-publicpath

Why

Use dynamic import handler to change runtime public base path, like webpack's __webpack_public_path__.

Usage

• run yarn add vite-plugin-dynamic-publicpath --dev
• add the plugin into vite.config.ts

// vite.config.ts

import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath'
export default defineConfig({
  plugins: [
    useDynamicPublicPath(/** option */),
  ]
})

e.g. basic demo

// main.ts

// Your dynamic cdn
const dynamicCdn = oneOf(['cdn.xxx.com', 'cdn1.xxx.com']);
window.__dynamicImportHandler__ = function(importer) {
    return dynamicCdn + importer;
}
window.__dynamicImportPreload__ = function(preloads) {
    return preloads.map(preload => dynamicCdn + preload);
}

For legacy browser

e.g. legacy browser demo

// vite.config.ts

import legacy from '@vitejs/plugin-legacy'
import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath'
export default defineConfig({
  plugins: [
    /**
     * @see https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
     * /
    legacy({
      targets: ['defaults', 'not ie <= 8'] 
    }),
    /** Attention! The legacy plugin must before loaded than dynamic-publicpath plugin */
    useDynamicPublicPath({
      dynamicImportHandler: 'window.__dynamic_handler__',
      dynamicImportPreload: 'window.__dynamic_preload__'
    }),
  ]
})

Options

dynamicImportHandler

Type: string
Default: window.__dynamicImportHandler__

Register dynamic import handler

dynamicImportPreload

Type: string
Default: window.__dynamicImportPreload__

Register dynamic import preload handler

assetsBase

Type: string
Default: assets

Custom the assets directory.