/vite-plugin-cdn-import

Import modules from CDN with vite plugin

Primary LanguageTypeScriptMIT LicenseMIT

Import modules from CDN with vite plugin

English | 简体中文

GitHub tag License

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 cdn from 'vite-plugin-cdn-import'

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

Use preset

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

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

Preset packages

  • 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.

{
    prodUrl?: string
}

modules

external config

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

enableInDevMode

Enabled in dev mode

  • Type: boolean
  • Default:false

Please ensure process.env.NODE_ENV === 'development' when you use vite2, vite3.

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