vite-plugin-dynamic-import-cdn

English | 简体中文

• In production environments, dependencies can be loaded from a CDN to reduce build time and bundle size.
• For dynamically imported dependencies, the CDN resources can also be dynamically loaded to reduce initial request time.

References

• This plugin is based on vite-plugin-cdn-import.
• Fixes issues with some preset modules not working correctly with certain CDN paths.
• Fixes some dependencies failing to be external during the build process.
• Adds support for dynamically importing CDN resources.

Installation

# npm
npm i vite-plugin-dynamic-import-cdn -D

# yarn
yarn add vite-plugin-dynamic-import-cdn -D

# pnpm
pnpm add vite-plugin-dynamic-import-cdn -D

Basic Usage

// vite.config.js
import { defineConfig } from 'vite'
import { dynamicImportCdn } from 'vite-plugin-dynamic-import-cdn'

export default defineConfig({
  plugins: [
    // ...other plugins
    dynamicImportCdn({
      cdnUrlPreset: 'unpkg',
      modules: [
        // Preset modules
        'react',
        'react-dom',
        'dayjs',
        'antd@5',
        // Custom modules
        {
          dynamic: 'global', // Enable dynamic loading of CDN resources
          name: 'echarts',
          var: 'echarts',
          path: 'dist/echarts.min.js'
        },
      ]
    })
  ]
})

Preset npm Packages

• react
• react-dom
• react-router-dom
• antd@5
• antd@4
• vue@3
• vue@2
• vue-router@4
• vue-router@3
• moment
• dayjs
• axios
• lodash

Parameters

Plugin Configuration

| Name | Description | Type | | ----------------- | ------------------------------------------ | --------------------------------------------- | | cndUrl | Template URL for generating CDN file paths | string | 'jsdelivr' | 'cdnjs' | 'unpkg' | | modules | Configuration for CDN modules | (string | Module)[] | | generateScriptTag | Customizes the generated script tag | Omit<HtmlTagDescriptor, 'tag' | 'children'> | | generateCssTag | Customizes the generated CSS tag | Omit<HtmlTagDescriptor, 'tag' | 'children'> |

Module Configuration

| Name | Description | Type | | --------------- | ------------------------------------------------------------------------ | -------------------------------- | | name | Name of the package to be accelerated by the CDN | string | | alias | Alias for the name, e.g., react-dom/client is an alias for react-dom | string[] | | var | Global variable assigned to the module | string | | path | Specific CDN path for loading | string | string[] | | css | Stylesheets to load from the CDN | string | string[] | | version | Manually specify the dependency version if it can't be resolved | string | | dynamic | Enable dynamic CDN import for dynamically imported modules | 'esm' | 'global' | | externalGlobals | Customizes global variables; see [rollup-plugin-external-globals] | (id: string) => (string | void) | | descriptor | Additional tags to insert, e.g., for modifying the global name of lodash | HtmlTagDescriptor |

Conversion Process

Standard Import

// index.js
import * as echarts from 'echarts'
echarts.init(document.getElementById('main'))

// ----------After Conversion-------------

// index.html
<script src="https://unpkg.com/[email protected]/dist/echarts.min.js"></script>

// index.js
echarts.init(document.getElementById('main'))

Dynamic Import

// index.js
import('echarts').then(echarts => {
  echarts.init(document.getElementById('main'))
})

// ----------After Conversion-------------

// index.html
window.echartsThenable = {
  then(resolve, reject) {
    if (window.echarts) return resolve(window.echarts)
    // __loadScript__: A function to create a script tag for loading JS resources
    window.__loadScript__("https://unpkg.com/[email protected]/dist/echarts.min.js")
      .then(() => {
        resolve(window.echarts)
      })
      .catch((err) => {
        reject(err)
      })
  }
}

// index.js
Promise.resolve(echartsThenable).then(echarts => {
  echarts.init(document.getElementById('main'))
})

Resources

• vite-plugin-cdn-import.
• rollup-plugin-external-globals.