将vite项目的公共依赖抽离为CDN调用以加快访问速度

1. 安装Vite插件

npm install vite-plugin-cdn-import

2. 使用插件

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import cdn from "vite-plugin-cdn-import";
export default defineConfig({
    plugins: [vue(), cdn({
      modules: [
        "vue",
        "vue-router",
        {
          name: "dayjs",
          var: "dayjs",
          path: [
            "dayjs.min.js",
            "plugin/customParseFormat.js",
            "plugin/weekday.js",
            "plugin/localeData.js",
            "plugin/weekOfYear.js",
            "plugin/weekYear.js",
            "plugin/advancedFormat.js",
            "plugin/quarterOfYear.js",
          ],
        },
        {
          name: "ant-design-vue",
          var: "antd",
          path: ["dist/antd.min.js", "dist/antd-with-locales.min.js"],
        }]
    })]
})

此插件会将依赖转换为使用 https://cdn.jsdelivr.net访问,插件会从package.json中需要抽取的依赖的版本号,然后加上path里的内容,打包后插入到index.html的head中

如ant-design-vue会变为

<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@4.2.3/dist/antd.min.js" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@4.2.3/dist/antd-with-locales.min.js" crossorigin="anonymous"></script>

评论列表
0/1000
共 0 评论