Vite-plugin-fast-cdn-import NPM

从多个 CDN 中找出最快的源并加载资源
Find the fastest source from multiple CDNs and load resources

目前本插件不支持 js 包的加载，仅支持 css 包的加载！！

🏠 主页

https://github.com/CaoMeiYouRen/vite-plugin-fast-cdn-import#readme

✨ Demo

https://github.com/CaoMeiYouRen/vite-plugin-fast-cdn-import#readme

依赖要求

node >=14

浏览器要求情况（同 vite3）

Chrome >=87
Firefox >=78
Safari >=13
Edge >=88

安装

npm install vite-plugin-fast-cdn-import

使用

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tsconfigPaths from 'vite-tsconfig-paths'
import { vitePluginFastCdnImport } from 'vite-plugin-fast-cdn-import'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        tsconfigPaths(),
        vitePluginFastCdnImport({ // 添加依赖即可
            cdnUrls: [ // 指定 CDN 源
                'https://npm.elemecdn.com/:name@:version/:path',
                'https://cdn.jsdelivr.net/npm/:name@:version/:path',
                'https://unpkg.com/:name@:version/:path',
            ],
            modules: [ // 目前仅支持 css 的加载
                {
                    name: 'normalize.css',
                    path: 'normalize.css',
                },
                {
                    name: 'element-plus',
                    path: 'dist/index.css',
                },
            ],
        }),
    ],
    server: {
        port: 4000,
        open: true,
        proxy: {},
    },
})

类型参考

export interface Module {
    /**
     * 包的名称
     */
    name: string
    /**
     * 以手动填写为准，默认会去 node_modules 下获取已安装的版本号
     */
    version?: string
    /**
    * 以外部包形式载入时的全局变量名称，载入的资源是 js 时使用
    */
    var?: string
    /**
     * 需要加载的资源路径，相对于包的地址
     */
    path: string
    /**
     * 是否为纯 css
     */
    cssOnly?: boolean
      /**
     * 是否为 es module
     */
    esModule?: boolean
}

export interface Options {
    /**
     * 要加载的包
     */
    modules: Module[]
    /**
     * CDN 的地址，格式：https://unpkg.com/:name@:version/:path
     */
    cdnUrls?: string[]
    /**
     * 禁用本插件
     */
    disabled?: boolean
    /**
     * 全量竞速，即对每一个包都进行一次竞速
     */
    allRace?: boolean

    /**
     * 手动指定缓存key，改变cacheKey会使之前的缓存失效
     */
    cacheKey?: string
}

基本原理

在指定的多个 CDN 源中，会使用 fetch对第一个包的地址进行一次 HEAD 请求，得出最快的源，剩余的包不再竞速，直接采用该结果。

第一次的竞速结果会缓存在 localStorage 中，直到包的数量或版本号发生了改变，此时缓存失效，重复上述流程。

存在的问题

由本项目的竞速原理可知，只会对第一个包进行竞速，因此可能会出现第一个包在某个 CDN 源是存在的，后续的包不存在，导致加载失败，故需要开发者手动对所有 CDN 源进行校验，确保所有的包都能在所有 CDN 源加载。可在配置中设置 allRace为 true启用全量竞速，会对每一个包都单独竞速。虽然可以解决包不存在的问题，但也多了竞速的耗时，请开发者自行权衡。
由于用到了 fetch，所以在不支持 fetch 的浏览器下无法竞速，也就无法加载包。
由于用到了 Promise.race、Promise.any，所以在不支持 Promise.race、Promise.any 的浏览器中需要 polyfill 才能使用
当缓存里的 CDN 源失效时，无法自动检测出失效的 CDN 源，此时会出现加载资源失败的情况。—— 该问题可通过手动修改 cacheKey 来解决。
本插件需要在 html 注入一段 js，增加了 html 的体积。