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来加快页面的速度。