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
`` ts
// vite.config.ts

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


`ts
// 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);
}

`


$3


e.g. legacy browser demo
`ts
// 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

$3

Type: string

Default: window.__dynamicImportHandler__

Register dynamic import handler

$3

Type: string

Default: window.__dynamicImportPreload__

Register dynamic import preload handler

$3

Type: string

Default: assets`

Custom the assets directory.