Vite 中文文档

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:

  1. ``` sh
  2. npm install vite-plugin-cdn-import --save-dev

  4. ```

or yarn

  1. ``` sh
  2. yarn add vite-plugin-cdn-import -D

  4. ```

Basic Usage


Add it to vite.config.js

  1. ``` js
  2. // vite.config.js
  3. import reactRefresh from '@vitejs/plugin-react-refresh'
  4. import importToCDN from 'vite-plugin-cdn-import'

  6. export default {
  7.     plugins: [
  8.         importToCDN({
  9.             modules: [
  10.                 {
  11.                     name: 'react',
  12.                     var: 'React',
  13.                     path: `umd/react.production.min.js`,
  14.                 },
  15.                 {
  16.                     name: 'react-dom',
  17.                     var: 'ReactDOM',
  18.                     path: `umd/react-dom.production.min.js`,
  19.                 },
  20.             ],
  21.         }),
  22.     ],
  23. }
  24. ```

Use autoComplete


  1. ``` js
  2. // vite.config.js
  3. import reactRefresh from '@vitejs/plugin-react-refresh'
  4. import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'

  6. export default {
  7.     plugins: [
  8.         importToCDN({
  9.             modules: [
  10.                 autoComplete('react'),
  11.                 autoComplete('react-dom')
  12.             ],
  13.         }),
  14.         reactRefresh(),
  15.     ],
  16. }
  17. ```

Autocomplete supported modules


  1. ``` sh
  2. "react" | "react-dom" | "react-router-dom" |
  3. "antd" | "ahooks" | "@ant-design/charts" |
  4. "vue" | "vue2" | "@vueuse/shared" |
  5. "@vueuse/core" | "moment" |
  6. "eventemitter3" | "file-saver" |
  7. "browser-md5-file" | "xlsx | "crypto-js" |
  8. "axios" | "lodash" | "localforage"

  10. ```

VueUse demo


  1. ``` js
  2. import vue from '@vitejs/plugin-vue'
  3. import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'

  5. export default {
  6.     plugins: [
  7.         vue(),
  8.         importToCDN({
  9.             modules: [
  10.                 autoComplete('vue'), // vue2 use autoComplete('vue2')
  11.                 autoComplete('@vueuse/shared'),
  12.                 autoComplete('@vueuse/core')
  13.             ],
  14.         }),
  15.     ],
  16. }
  17. ```

Options


Name Description Type Default
:--- :--- :--- :---
prodUrl Overrides the global prodUrl, allowing you to specify the CDN location for a specific module string https://cdn.jsdelivr.net/npm/{name}@{version}/{path}
modules Modules config Array<Module> / Array<(prodUrl:string) => Module> -

Module


Name Description Type
:--- :--- :---
name The name of the module you want to externalize string
var A variable that will be assigned to the module in global scope, Rollup requires this string
path Specify the load path on the CDN string / string[]
css You can alternatively specify multiple style sheets which will be loaded from the CDN 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