# Vite plugin which can import modules asynchronously from CDN. This plugin is forked from [vite-plugin-cdn-import](https://github.com/MMF-FE/vite-plugin-cdn-import) and allows you to specify modules that should be loaded in **defer/async** mode in addition. # Installation npm: ``` npm install vite-plugin-cdn-import-async --save-dev ``` yarn: ``` yarn add vite-plugin-cdn-import-async -D ``` # Usage ## Plugin config Specify `async` or `defer` to `mode` param whthin configs of the module you want to import asynchronously from CDN: ```js // vite.config.js import cdnImport from 'vite-plugin-cdn-import-async' export default { plugins: [ cdnImport({ modules: [ { name: 'react', var: 'React', mode: 'async', // 'async' atrribute will be added to its ``` ## Input file By default, every module that defined in plugin config will generate its ` ``` According to `data-cdn-import="React,lottie"`, plugin will only handle `React` and `lottie` modules and generate their `

``` ### Mode suffix Using suffix `@async` or `@defer` within `data-cdn-import` can also generate asynchronous ` ``` According to `React@async` within `data-cdn-import`, the **React** module will generate `

``` ### Lazy loading In addition to `async` or `defer` as the value of `mode`, here's other avalable values for lazy-loading: | Value of `mode` | Description | | ---- | ---- | | DOMContentLoaded | Module will start being loaded within `DOMContentLoaded` event of `window`. | | load | Module will start being loaded within `load` event of `window`. | | [milliseconds] | Module will start being loaded in specified milliseconds after `load` event emits. | **Example** In `vite.config.js`: ```js export default defineConfig({ plugins: [ importToCDN({ modules: [ { name: 'react', var: 'React', mode: 'DOMContentLoaded', path: `https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js`, }, { name: 'lottie-web', var: 'lottie', mode: '3000', path: `https://cdn.jsdelivr.net/npm/lottie-web@5.10.0/build/player/lottie.min.js`, }, { name: 'axios', var: 'axios', mode: 'load', path: 'https://cdn.jsdelivr.net/npm/axios@1.2.1/dist/axios.min.js', } ], }), reactRefresh(), ], }) ``` Or the entry file: ```html ``` The output file would be like: ```html ``` ## Import async module Once a module is loaded asynchronously by `mode` config, you should create an function to handle it while using it in pages: ```js export function cdnAsyncImport(moduleName: string, isDev: boolean): Promise { if (isDev) { return Promise.reject() } return new Promise((resolve, rejects) => { const errorModules = window.cdnImportAsync_loadingErrorModules || [] const moduleVar = window.__cdnImportAsync_nameToVar[moduleName] if (errorModules.includes(moduleVar)) { rejects() } else if (window[moduleVar]) { resolve(window[moduleVar]) } else { window.addEventListener( 'asyncmoduleloaded', (e: any) => { const { detail } = e || {} if (detail && !detail.isError && window[moduleVar]) { resolve(window[moduleVar]) } else { rejects() } }, false ) } }) } cdnAsyncImport('lottie-web', import.meta.env.DEV).then(lottie => { // Async module has been successfully loaded. console.log(lottie) }).catch(() => { // Handling DEV or Error case import('lottie-web').then(...) }) ``` ## Other ussages Other basic ussages see [vite-plugin-cdn-import](https://github.com/MMF-FE/vite-plugin-cdn-import).