1.0.1 • Published 6 months ago

vite-plugin-cdn-import v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

从 CDN 加载 modules 的 vite 插件

English | 简体中文

GitHub tag License

允许指定 modules 在生产环境中使用 CDN 引入。

这可以减少构建时间,并且提高生产环境中页面加载速度。

安装

下载 npm 插件

npm install vite-plugin-cdn-import --save-dev

or yarn

yarn add vite-plugin-cdn-import -D

基本用法

// 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`,
                },
            ],
        }),
    ],
}

使用预设

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

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

预设的 npm 包

  • react
  • react-dom
  • react-router-dom
  • antd
  • vue
  • vue2
  • vue-router
  • vue-router@3
  • moment
  • dayjs
  • axios
  • lodash

参数

prodUrl

全局 prodUrl 属性,生成 CND 文件路径的模板 url.

{
    prodUrl?: string
}

modules

external 模块配置

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

enableInDevMode

是否在开发模式中启用

  • 类型: boolean
  • 默认值:false

vite2, vite3 请确保开发模式 process.env.NODE_ENV === 'development'

generateScriptTag

自定义生成的 script 标签

  • 类型
generateScriptTag?: (
    name: string,
    scriptUrl: string,
) => Omit<HtmlTagDescriptor, 'tag' | 'children'>

generateCssLinkTag

自定义生成 css link 标签

  • 类型
generateCssLinkTag?: (
    name: string,
    cssUrl: string,
) => Omit<HtmlTagDescriptor, 'tag' | 'children'>

Module 配置

NameDescriptionType
name需要 CDN 加速的包名称string
alias名称的别名,例如“react-dom/client”是“react-dom”的别名string[]
var全局分配给模块的变量string
path指定 CDN 上的加载路径string / string[]
css可以指定从 CDN 地址上加载多个样式表string / string[]
prodUrl覆盖全局的 prodUrlstring / string[]

其他的 CDN pordUrl 地址

NamepordUrl
unpkg//unpkg.com/{name}@{version}/{path}
cdnjs//cdnjs.cloudflare.com/ajax/libs/{name}/{version}/{path}

资源