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

介绍

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

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

安装依赖

javascript 复制代码
npm install vite-plugin-cdn-import --save-dev

这是一个 Vite 专用插件,用于在构建时自动将指定的 npm 依赖(如 Vue、React、Axios 等)替换为 CDN 链接。

它会修改最终生成的 HTML,自动注入

配置文件

vite.config.js

javascript 复制代码
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来加快页面的速度。

相关推荐
奥尔特星云大使10 小时前
ALTER 与 UPDATE、DROP 与 DELETE区别
linux·运维·数据库·mysql
野犬寒鸦10 小时前
多级缓存架构:性能与数据一致性的平衡处理(原理及优势详解+项目实战)
java·服务器·redis·后端·缓存
回忆哆啦没有A梦10 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__10 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生10 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园11 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
2025年一定要上岸11 小时前
【日常学习】UI自动化自定义异常类
运维·ui·自动化
秃头菜狗11 小时前
八、安装 Hadoop
大数据·hadoop·分布式
海琴烟Sunshine12 小时前
Leetcode 14. 最长公共前缀
java·服务器·leetcode
cxr82812 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能