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

相关推荐
fuyongliang12330 分钟前
linux Nginx服务配置介绍,和配置流程
运维·服务器·网络
gnip1 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel1 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休2 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪2 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do2 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选2 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
UNbuff_02 小时前
Linux bzip2 命令使用说明
linux·运维·服务器
奇舞精选2 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼2 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发