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.
Install the plugin with npm:
npm install vite-plugin-cdn-import --save-dev
or yarn
yarn add vite-plugin-cdn-import -D
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`,
},
],
}),
],
}// vite.config.js
import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
export default {
plugins: [
importToCDN({
modules: [autoComplete(['react', 'react-dom'])],
}),
],
}- react
- react-dom
- react-router-dom
- antd
- vue
- vue2
- vue-router
- vue-router@3
- moment
- dayjs
- axios
- lodash
Global prodUrl attribute, template url that generates CND file path.
- REF: prodUrl
- Type
{
prodUrl?: string
}external config
- Type
type GetModuleFunc = (prodUrl: string) => Module
{
modules: (Module | Module[] | GetModuleFunc | GetModuleFunc[])[]
}Enabled in dev mode
- Type:
boolean - Default：
false
vite2, vite3 请确保开发模式 process.env.NODE_ENV === 'development'
Custom generated script tags
- Type
generateScriptTag?: (
name: string,
scriptUrl: string,
) => Omit<HtmlTagDescriptor, 'tag' | 'children'>Customize generated css link tags
- Type
generateCssLinkTag?: (
name: string,
cssUrl: string,
) => Omit<HtmlTagDescriptor, 'tag' | 'children'>| 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[] |
| Name | pordUrl |
|---|---|
| unpkg | //unpkg.com/{name}@{version}/{path} |
| cdnjs | //cdnjs.cloudflare.com/ajax/libs/{name}/{version}/{path} |
