2.1、CDN管理插件vite-plugin-cdn-import 首先下载CDN管理插件依赖:npm install vite-plugin-cdn-import --save-dev 配置vite.config.ts,步骤与之前配置插件类似,先import依赖import importToCDN from "vite-plugin-cdn-import"或者import { Plugin as importToCDN } from "vite-plugin-cdn-import" 再将插件配置到...
$ yarn add vite-plugin-cdn2 -D # or $ npm install vite-plugin-cdn2 -D Usage // vite.config.ts import { defineConfig } from "vite"; import { cdn } from "vite-plugin-cdn2"; export default defineConfig({ plugins: [ // ... your plugin cdn({ modules: ["vue"] }), ], })...
Add it to vite.config.js // vite.config.jsimportcdnfrom'vite-plugin-cdn-import'exportdefault{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`,},],}),],} Use preset /...
vite-plugin-cdn-import 是一个专为 Vite 构建工具设计的插件,它允许开发者在生产环境中通过 CDN 引入指定的模块,从而减少项目体积,提高加载速度。以下是关于如何使用 vite-plugin-cdn-import 的详细步骤: 1. 理解vite-plugin-cdn-import的基本概念和功能 vite-plugin-cdn-import 的核心功能是通过配置文件指定需要通...
VitePluginCDN({// 传入importMapimportMap:{"vue":"https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.esm-browser.prod.min.js"}}) 打包后的结果: 已成功添加cdn 在网上找一个项目测试一下,成功加载出来了 到这一步,已验证这种方式是行得通的 ...
import importFromCDN from "vite-plugin-cdn-import-rely"; export default defineConfig({ plugins: [ importFromCDN( [ { name: "element-plus", var: "ElementPlus", path: "index.full.min.js", relys: ["vue"], }, { name: "element-plus/es/locale/lang/zh-cn", pkgName: "element-plus",...
vite-plugin-external-cdn vite-plugin-external-cdn 一款将依赖转换为 cdn 的 vite 插件,脱胎于 vite-plugin-cdn-import,由于 vite-plugin-cdn-import 停止维护,fork 了一份到本地,并对一些 bug 做了修复,做了开源。 安装: pnpmaddvite-plugin-external-cdn-D ...
// vite.config.jsimportcdnImportfrom'vite-plugin-cdn-import-async'exportdefault{plugins: [ cdnImport({modules: [ {name:'react',var:'React',mode:'async',// 'async' atrribute will be added to its tag.path:`https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js`, }...
vite-plugin-html-template-mpa - Multi Pages Common template support. vite-plugin-vconsole-mpa - Multi Pages Vconsole supports,simple config. vite-plugin-browser-sync - BrowserSync. vite-plugin-jspm - Resolves dependencies independently from CDN providers using import maps and es-module-shims. vite...
// vite.config.jsimportcdnfrom'vite-plugin-cdn-import'exportdefault{plugins:[cdn({modules:['react','react-dom'],}),],} Preset packages react react-dom react-router-dom antd vue vue2 vue-router vue-router@3 moment dayjs axios lodash ...