Vue3项目使用cdn加速

最近在了解前端性能优化问题，想到能不能给我之前做的小项目使用cdn优化一下，准备冻手
首先是找到免费的cdn资源，网上有很多我就不说明了，这里列出我使用的

样式文件放在head里面
<link href="https://cdn.bootcdn.net/ajax/libs/vant/3.4.3/index.css" rel="stylesheet"> js文件放在body里面
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.3/vue-router.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/4.0.0/vuex.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vant/3.4.3/vant.js"></script>

有两个要注意的点

如果有哪些资源是和vue相关的,vue一定也要使用cdn资源,举个例子,不能vue是本地依赖,而vuex是cdn资源,这样子vuex中有关vue的部分会识别不到vue
vue的引入要放在最前面

然后在vue.config.js中配置如下,如果没有该文件就自己创建一个,在项目的根目录下

const objExternals = {// CDN 的 资源（和vue相关的） 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入'vue': 'Vue',// 属性名称 Vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的，// 不去 node_modules 中找，而是去找 全局变量 Vue'vue-router': 'VueRouter','vuex': 'Vuex','axios': 'axios','vant': 'vant'
}
module.exports = {publicPath: './',configureWebpack: {//判断在生产环境就使用cdn, 看个人项目情况externals: process.env.VUE_APP_STAGE === 'LOCAL' ? {} : objExternals},
}

最后就是修改之前的引入方式了,对于vuex,vue-router,axios等这些没啥变化,而vant这些第三方库就需要改变
这是之前的引用方式 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import 'vant/lib/index.css'
import {Swipe, SwipeItem , Tab, Tabs, Progress, Form, Field, CellGroup,Dialog, List, Popup, Toast, SwipeCell, Button, Cell, Lazyload,Overlay,Skeleton, PullRefresh, Badge} from 'vant'import { useIntersectionObserver } from '@vueuse/core'
const app = createApp(App)
app.use(store).use(router).use(Swipe).use(SwipeItem).use(Tab).use(Tabs).use(Progress).use(Form).use(Field).use(CellGroup).use(Dialog).use(List).use(Popup).use(Toast).use(SwipeCell).use(Button).use(Cell).use(Lazyload,{HomeView:true,highQualitySongsRec:true,newMusic:true,musicSwiperItem:true,iconList:true,musicListTop:true,musicList:true}).use(Overlay).use(Skeleton).use(PullRefresh).use(Badge)
app.mount('#app')

使用cdn引入的方式

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import { useIntersectionObserver } from '@vueuse/core'
const app = createApp(App)
app.use(store).use(router).use(vant)  //多的.use(vant.Lazyload,{  //懒加载需要手动注册HomeView:true,highQualitySongsRec:true,newMusic:true,musicSwiperItem:true,iconList:true,musicListTop:true,musicList:true})
app.mount('#app')

可以发现只要手动use(vant)就可以了,而组件的使用方式可以看vant官网的介绍,这里举个简单的例子,如果要使用Toast就直接用vant.Toast()就好了
项目成功跑起来后就可以把package.json中对应的依赖删除了

最后进行打包,看一下前后打包体积的对比:
前:

后:

使用cdn资源引入后,打包后的体积仅为原来的46%
不仅加速了资源的获取,并且减少了打包体积,可以有效减少首屏加载时间
但也有一些缺点:

如果免费cdn资源挂了,你的项目就挂了,所以比较适合自己的小项目玩一玩,或者可以自己搭一个服务器,比较稳定
第三方库的组件不能按需引入,例如vant的组件
如果有什么问题欢迎交流~

Vue3项目使用cdn加速相关推荐

Day 195/200 Vue3 项目使用CDN加速
(一)需求项目首屏加载慢,低峰时段8.7s,高峰时段甚至有60s+ 以上的反馈. (二)原因 Vue-cli 本身是有对webpack 打包优化的. 慢,是因为项目做了负载均衡 + nginx 做了 ...
前端Vue项目实现CDN加速
前端Vue项目实现CDN加速我们在开发前端项目的时候难免会遇到请求响应慢,页面数据渲染慢,等等问题.浏览器从服务器上下载 CSS.js 和图片等文件时都要和服务器连接,而大部分服务器的带宽有限,如果 ...
前端CDN资源库，解决HTML大屏首次加载慢的问题了，大屏项目必备cdn加速
CDN简介: CDN的全称是Content Delivery Network,即内容分发网络.CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡.内容分发 ...
前端CDN资源库，再也不用担心vue首次加载慢的问题了，vue项目必备cdn加速
试了好多个cdn资源库,可能跟国内外有关系吧,整体测试下来BootCDN的速度相对来说挺快的,支持一下 unpkg.com/一个内容源自 npm 的全球快速 CDN 好慢呐 unpkg.com 引用的 ...
企业项目实战----CDN加速的实现
前言 CDN加速对企业非常重要,体现在哪呢?举个例子,A企业的后端服务器在杭州,用户遍布全国,让全国的用户都去访问企业A在杭州的后端服务器你觉得可行吗?肯定不可行呀!第一,后端服务器承受不了全国这么巨 ...
推荐一款免费的cdn加速网站
开源项目免费CDN 加速服务 https://www.bootcdn.cn/
【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积
CDN(Content Delivery Network)即内容分发网络,是一种通过在全球范围内分布式部署服务器来加速网络内容传输的技术.CDN加速的原理是,当用户请求访问某个资源时,CDN会根据用户 ...
Nginx自建CDN加速节点实现DNS智能解析网站项目
如今,网站项目越来越多的会使用CDN加速,如果需要便捷一点的可以直接用第三方提供的CDN加速服务,比如百度CDN.七牛.又拍云.腾讯云.阿里云等等服务商都有提供这类服务.但是前提条件是需要一定的成本, ...
【官方】BootCDN-稳定、快速、免费的前端开源项目 CDN 加速服务
关于 BootCDN BootCDN 是极兔云联合 Bootstrap 中文网共同支持并维护的前端开源项目免费 CDN 服务,致力于为 Bootstrap.jQuery.React.Vue.js ...

Vue3项目使用cdn加速

Vue3项目使用cdn加速相关推荐

最新文章

热门文章