vite-plugin-cdn-import

Import modules from CDN with vite plugin

English | 简体中文

Allows you to specify modules to be introduced in a production environment using a CDN.

This can reduce build time and improve page load speed in production environments.

Installation

Install the plugin with npm:

npm install vite-plugin-cdn-import --save-dev

or yarn

yarn add vite-plugin-cdn-import -D

Basic Usage

Add it to vite.config.js

// vite.config.js
import importToCDN from 'vite-plugin-cdn-import'

export default {
    plugins: [
        importToCDN({
            modules: [
                {
                    name: 'react',
                    var: 'React',
                    path: `umd/react.production.min.js`,
                },
                {
                    name: 'react-dom',
                    var: 'ReactDOM',
                    path: `umd/react-dom.production.min.js`,
                },
            ],
        }),
    ],
}

Use autoComplete

// vite.config.js
import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'

export default {
    plugins: [
        importToCDN({
            modules: [autoComplete(['react', 'react-dom'])],
        }),
    ],
}

Autocomplete supported modules

• react
• react-dom
• react-router-dom
• antd
• vue
• vue2
• vue-router
• vue-router@3
• moment
• dayjs
• axios
• lodash

Options

prodUrl

Global prodUrl attribute, template url that generates CND file path.

• REF: prodUrl
• Type

{
    prodUrl?: string
}

• Default: https://cdn.jsdelivr.net/npm/{name}@{version}/{path}

modules

external config

• Type

type GetModuleFunc = (prodUrl: string) => Module
{
    modules: (Module | Module[] | GetModuleFunc | GetModuleFunc[])[]
}

enableInDevMode

Enabled in dev mode

• Type: boolean
• Default：false

vite2, vite3 请确保开发模式 process.env.NODE_ENV === 'development'

generateScriptTag

Custom generated script tags

• Type

generateScriptTag?: (
    name: string,
    scriptUrl: string,
) => Omit<HtmlTagDescriptor, 'tag' | 'children'>

generateCssLinkTag

Customize generated css link tags

• Type

generateCssLinkTag?: (
    name: string,
    cssUrl: string,
) => Omit<HtmlTagDescriptor, 'tag' | 'children'>

Module

Name	Description	Type
name	package name	string
alias	Alias ​​of name, for example "react-dom/client" is an alias of "react-dom"	string[]
var	Variables assigned globally to the module	string
path	Specify the load path on the CDN	string / string[]
css	Multiple style sheets can be loaded from CDN addresses	string / string[]
prodUrl	Override global prodUrl	string / string[]

Other CDN pordUrl

Name	pordUrl
unpkg	//unpkg.com/{name}@{version}/{path}
cdnjs	//cdnjs.cloudflare.com/ajax/libs/{name}/{version}/{path}

Ressources

• webpack-cdn-plugin
• rollup-plugin-external-globals
• vite-plugin-externals