@netless/vite-plugin-cdn-import

a fork from Import packages from CDN for the vite plugin


Keywords
vite cdn plugin, vite CDN extension, cdn, vite-plugin
License
MIT
Install
npm install @netless/vite-plugin-cdn-import@0.3.5

Documentation

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

{
    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

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