vite如果把全部的文件都給本地打包的話，體積就很大，所以把公共庫給打包出來，就能減少很多體積。
使用vite插件vite-plugin-cdn-import，很方便的打包。下面以vue和element-plus為例。
安裝插件
npm install vite-plugin-cdn-import?使用插件
找到vite配置文件vite.config.js
頭部添加
npm install vite-plugin-cdn-import添加到文件plugins節點中
主要添加到modules中，多個CDN，就添加多個對象
name為需要 CDN 加速的包名稱，一般名稱為在js文件中from后的名稱，import xx from 'name'
var為引用的變量，一般在js文件中import后的名稱
css如果引用CDN庫中有CSS，就把CSS填寫上，無需在JS文件中再引入了
importToCDN({
modules: [
{
name: 'vue',
var: 'Vue',
path: `https://cdn.staticfile.org/vue/3.2.45/vue.runtime.global.prod.min.js`,
},
{
name: 'element-plus',
var: 'ElementPlus',
path: `https://cdn.staticfile.org/element-plus/2.2.28/index.full.min.js`,
css: 'https://cdn.staticfile.org/element-plus/2.2.28/index.min.css'
},
]
})上述配置，配置了Vue和element-plus庫
那么在JS引用如下
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
createApp(App).use(ElementPlus).mount('#app')完整vite.config.js內容
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {Plugin as importToCDN} from "vite-plugin-cdn-import"
export default defineConfig({
plugins: [
vue(),
importToCDN({
modules: [
{
name: 'vue',
var: 'Vue',
path: `https://cdn.staticfile.org/vue/3.2.45/vue.runtime.global.prod.min.js`,
},
{
name: 'element-plus',
var: 'ElementPlus',
path: `https://cdn.staticfile.org/element-plus/2.2.28/index.full.min.js`,
css: 'https://cdn.staticfile.org/element-plus/2.2.28/index.min.css'
},
]
}),
]
});
厲害
