将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 评论