Vue3 加快页面加载速度 使用CDN外部库的加载 提升页面打开速度 服务器分发

介绍

CDN（内容分发网络）通过全球分布的边缘节点，让用户从最近的服务器获取资源，减少网络延迟，显著提升JS、CSS等静态文件的加载速度。公共库（如Vue、React、Axios）托管在CDN上，减少自身服务器的带宽消耗和请求负载，提高网站稳定性。

国内公共CDN： https://cdn.bytedance.com/#字节跳动

安装依赖

npm install vite–plugin–cdn–import —save–dev

这是一个 Vite 专用插件，用于在构建时自动将指定的 npm 依赖（如 Vue、React、Axios 等）替换为 CDN 链接。 它会修改最终生成的 HTML，自动注入

配置文件

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteCdnImport from 'vite-plugin-cdn-import';

export default defineConfig({
plugins: [vue(), ViteCdnImport({
modules: [
{
name: 'vue',
var: 'Vue',
path: 'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.prod.min.js',
},
{
name: 'axios',
var: 'axios',
path: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js',
},
],
})],
build: {
rollupOptions: {
external: ['vue','axios'], // 外部化库
},
}
})

开发环境时使用的是本地依赖，当打包发布上线时就会使用cdn来加快页面的速度。