Import packages from CDN for the vite plugin
npm install vite-plugin-cdn-importEnglish | 简体中文


允许指定 modules 在生产环境中使用 CDN 引入。
这可以减少构建时间,并且提高生产环境中页面加载速度。
下载 npm 插件
``bash`
npm install vite-plugin-cdn-import --save-dev
or yarn
`bash`
yarn add vite-plugin-cdn-import -D
`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,umd/react-dom.production.min.js
},
{
name: 'react-dom',
var: 'ReactDOM',
path: ,`
},
],
}),
],
}
`js
// vite.config.js
import cdn from 'vite-plugin-cdn-import'
export default {
plugins: [
cdn({
modules: ['react', 'react-dom'],
}),
],
}
`
- react
- react-dom
- react-router-dom
- antd
- vue
- vue2
- vue-router
- vue-router@3
- moment
- dayjs
- axios
- lodash
ts
{
prodUrl?: string
}
`
- 默认值: $3
external 模块配置
- 类型
`ts
type GetModuleFunc = (prodUrl: string) => Module
{
modules: (Module | Module[] | GetModuleFunc | GetModuleFunc[])[]
}
`$3
是否在开发模式中启用
- 类型: boolean
- 默认值:false> vite2, vite3 请确保开发模式 process.env.NODE_ENV === 'development'
$3
自定义生成的 script 标签
- 类型
`ts
generateScriptTag?: (
name: string,
scriptUrl: string,
) => Omit
`$3
自定义生成 css link 标签
- 类型
`ts
generateCssLinkTag?: (
name: string,
cssUrl: string,
) => Omit
``| Name | Description | Type |
| ---- | --------------------------------------------- | ----------------- |
| name | 需要 CDN 加速的包名称 | string |
| alias | 名称的别名,例如“react-dom/client”是“react-dom”的别名 | string[] |
| var | 全局分配给模块的变量 | string |
| path | 指定 CDN 上的加载路径 | string / string[] |
| css | 可以指定从 CDN 地址上加载多个样式表 | string / string[] |
| prodUrl | 覆盖全局的 prodUrl | string / string[] |
| Name | pordUrl |
| ----- | -------------------------------------------------------- |
| unpkg | //unpkg.com/{name}@{version}/{path} |
| cdnjs | //cdnjs.cloudflare.com/ajax/libs/{name}/{version}/{path} |
- webpack-cdn-plugin
- rollup-plugin-external-globals
- vite-plugin-externals