位置: IT常识 - 正文

【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积(vue3项目搭建)

编辑:rootadmin
原力计划【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积

推荐整理分享【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积(vue3项目搭建),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3.0项目实战视频,vue3项目实战,vue3+ts+vite,vue3+ts+vite,vue3项目案例,vue3.0 vite,vue3项目案例,vue3.0 vite,内容如对您有帮助,希望把文章链接给更多的朋友!

CDN(Content Delivery Network)即内容分发网络,是一种通过在全球范围内分布式部署服务器来加速网络内容传输的技术。CDN加速的原理是,当用户请求访问某个资源时,CDN会根据用户的地理位置和网络状况,自动选择离用户最近的服务器来响应请求。如果该服务器上已经缓存了该资源,CDN会直接将缓存的资源返回给用户,从而减少了网络传输的时间和带宽消耗。

vite-plugin-cdn-import是一个Vite插件,它可以帮助我们在项目中引入CDN资源,从而提高项目的加载速度和性能。使用该插件,我们可以将一些常用的第三方库(如jQuery、Vue、React等)从本地文件中引入改为从CDN中引入,从而减少了网络请求和文件大小,提高了页面的加载速度。

本篇将使用vite-plugin-cdn-import插件 进行CDN加速优化项目。

vite-plugin-cdn-import插件官网:https://github.com/mmf-fe/vite-plugin-cdn-import

一、分析依赖视图

书接上文,我们使用rollup-plugin-visualizer分析依赖视图: 分析上图,我们发现整个项目依赖为581KB,其中vue体积占比42.75%,248.75KB大小,其次是vue-router占比17.56,而vue中的runtime-core/dist/runtime-core.esm-bundler.js这个包体积是最大的,181KB大小,占用整体消耗为31.12%。 使用Lighthouse分析过后发现首屏加载时间达到了惊人的7.7s,这是用户难以容忍的,先抛开别的原因不说,我们先使用cdn加速看看能降低多少。

二、CDN加速2.1、CDN管理插件vite-plugin-cdn-import

首先下载CDN管理插件依赖:npm install vite-plugin-cdn-import --save-dev

配置vite.config.ts,步骤与之前配置插件类似,先import依赖 import importToCDN from "vite-plugin-cdn-import"或者import { Plugin as importToCDN } from "vite-plugin-cdn-import"

【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积(vue3项目搭建)

再将插件配置到plugins中;

再配置modules参数,参数的意义也很简单。 name:表示模块的名称 var:表示模块在全局作用域中的变量名,如果该属性未指定,则默认使用模块的名称作为变量名。path:表示模块在CDN中的路径。

import { Plugin as importToCDN } from "vite-plugin-cdn-import"export default defineConfig({ plugins: [ vue(), visualizer({ open: true, //注意这里要设置为true,否则无效 filename: "stats.html", //分析图生成的文件名 gzipSize: true, // 收集 gzip 大小并将其显示 brotliSize: true, // 收集 brotli 大小并将其显示 }), importToCDN({ modules: [ { name: "***", var: "***", path: "********", }, ], }), ],2.2、配置需要加速的依赖

国内外优秀的CDN 加速服务站点有很多,大家可以根据自己的需要选择,要注意的是:Vite 不会重写从外部文件导入的内容,我们需要使用支持 ESM 编译的 CDN站点

首先在package.json中查看自己需要加速的依赖的版本号,如vue是3.2.45的:

进入bootcdn后,根据自己的版本号找到对应的CDN网址: 复制,然后将其粘贴到对应的path当中,如:

importToCDN({ modules: [ { name: "vue", var: "Vue", path: "https://unpkg.com/vue@3/dist/vue.global.js", }, ], }),

当然要图简单的话,vite-plugin-cdn-import还为我们提供了自动导入CDN的功能(autoComplete),有很多常用的依赖不需要自己再找(如vue、reac、antd、axios等),autoComplete功能可以在文档中查找使用。

2.3、记得在main.ts中引入模块

就是在main.ts引入对应模块然后挂载,注意名称要和你CDN加速的name名称相同,不然引不进来,一般不用怎么修改,只有遇到问题后再检查一下自己是不是忘记引入或者引入错误了。

最后,别忘了npm run build重新打包!

三、分析优化效果

重新打包后,视图如下: 可以看到,原先的vue依赖包和vue-router依赖包全部消失了,整个项目依赖缩小到了72.53KB(原先是五百多KB)。这是因为我们使用了CDN加速,这两个以后不再单独打包到项目当中,大大降低了整个项目的体积。

四、注意

需要注意以下几点:

CDN资源的版本问题:使用CDN资源时,需要注意资源的版本问题。如果使用的是不稳定的版本,可能会导致一些问题。建议使用稳定版本的CDN资源。CDN资源的可用性:使用CDN资源时,需要注意资源的可用性。如果使用的CDN资源不可用,可能会导致您的应用程序无法正常运行。建议使用可靠的CDN服务提供商,并在必要时自己搭建CDN服务,推荐使用:腾讯云CDN服务环境的配置:开发环境和部署环境CDN加速的方式可能不一样。

CDN加速虽然可以提高网站的访问速度和用户体验,但是也需要投入一定的成本和精力进行部署和管理,同时需要注意安全和缓存管理问题。

本文链接地址:https://www.jiuchutong.com/zhishi/293736.html 转载请保留说明!

上一篇:股东以固定资产入股怎么做账(股东以固定资产入股需要交税吗)

下一篇:冰川湾国家公园里的兰普鲁冰川,美国阿拉斯加州 (© Andrew Peacock/Getty Images)(冰川湾国家公园的冰川不止有白色一种)

  • 微信激活收不到验证码的原因(微信激活显示没有收到短信验证)

    微信激活收不到验证码的原因(微信激活显示没有收到短信验证)

  • 抖音设置隐藏无效视频是什么意思(抖音设置隐藏无效视频)

    抖音设置隐藏无效视频是什么意思(抖音设置隐藏无效视频)

  • iphone屏幕突然变暗(iphone屏幕突然变黄怎么回事)

    iphone屏幕突然变暗(iphone屏幕突然变黄怎么回事)

  • 黑鲨手机充电反复断开怎么办(黑鲨手机充电反复断开还有声音)

    黑鲨手机充电反复断开怎么办(黑鲨手机充电反复断开还有声音)

  • 抖音可以发多长视频(抖音可以发多长的短视频)

    抖音可以发多长视频(抖音可以发多长的短视频)

  • vivo锁屏时间怎么居中(vivo锁屏时间怎么变大)

    vivo锁屏时间怎么居中(vivo锁屏时间怎么变大)

  • 手机高温对手机有什么影响(手机高温对手机伤害大吗)

    手机高温对手机有什么影响(手机高温对手机伤害大吗)

  • 华为死机后重启一直卡在开机画面(华为死机后重启一直卡在开机画面?图解)

    华为死机后重启一直卡在开机画面(华为死机后重启一直卡在开机画面?图解)

  • 键盘打字声音在哪设置(键盘打字声音在哪里开)

    键盘打字声音在哪设置(键盘打字声音在哪里开)

  • 百度地图电脑如何截图(电脑百度地图怎么调转方向)

    百度地图电脑如何截图(电脑百度地图怎么调转方向)

  • 有线wifi和无线wifi的区别(wifi和有线网络)

    有线wifi和无线wifi的区别(wifi和有线网络)

  • 小米mix2s多少万快充(小米mix2s多少钱刚出来)

    小米mix2s多少万快充(小米mix2s多少钱刚出来)

  • 电脑上大小写转换是哪一个键(电脑上大小写转换快捷键)

    电脑上大小写转换是哪一个键(电脑上大小写转换快捷键)

  • c语言函数可以嵌套调用吗(c语言函数可以没有参数吗)

    c语言函数可以嵌套调用吗(c语言函数可以没有参数吗)

  • 键盘上刷新键是什么(键盘上那个是刷新键)

    键盘上刷新键是什么(键盘上那个是刷新键)

  • 华为手机有otg吗(华为手机ot g在哪里设置)

    华为手机有otg吗(华为手机ot g在哪里设置)

  • 淘宝帮买消息是发给谁的(淘宝帮买消息是真的吗)

    淘宝帮买消息是发给谁的(淘宝帮买消息是真的吗)

  • tpc数据线不分正反吗(type-c数据线正负极)

    tpc数据线不分正反吗(type-c数据线正负极)

  • 苹果手机拷贝的内容在哪里(苹果手机拷贝的内容怎么粘贴)

    苹果手机拷贝的内容在哪里(苹果手机拷贝的内容怎么粘贴)

  • ctrl+esc是什么快捷键(ctrl和esc)

    ctrl+esc是什么快捷键(ctrl和esc)

  • 移动魔百盒怎么看卫视(移动魔百盒怎么恢复出厂设置)

    移动魔百盒怎么看卫视(移动魔百盒怎么恢复出厂设置)

  • 小米8怎么拍星星(小米怎么拍星星好看)

    小米8怎么拍星星(小米怎么拍星星好看)

  • 三星w系列全捐公益吗(三星wa)

    三星w系列全捐公益吗(三星wa)

  • 华为qq音乐锁屏不显示(华为qq音乐锁屏歌词不显示)

    华为qq音乐锁屏不显示(华为qq音乐锁屏歌词不显示)

  • 若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由(若依前后端分离需要准备啥)

    若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由(若依前后端分离需要准备啥)

  • 混合销售行为如何缴纳增值税税率
  • 国外收到怎么说
  • 所得税税负率是125正常吗
  • 水利建设基金怎么交
  • 个体工商户需要交税吗?怎么交?
  • 房地产企业年报台账怎么填
  • 民办非企业可以上市吗
  • 增值税 不含税
  • 个人挂靠利润如何提取
  • 存货项目包括哪些具体内容
  • 收到客户定金账务怎么做
  • 存在弃置费用的固定资产有哪些
  • 进口报关手续费
  • 个人钱转入对公账户账务处理
  • 推广和业务
  • 计提坏账准备的前提条件
  • 税审需要什么资料和材料
  • 刻章后的发票要打印吗
  • 预付卡发票报销单怎么写
  • 银行对账单是否属于会计档案
  • 职工餐厅账务处理
  • 收到退回款项
  • 电器维修公司买什么保险
  • 企业所得税汇算清缴补缴税款分录
  • window10自带商店下载位置
  • 公积金贷款额度查询计算器
  • linux开机出现grub解决方法
  • 来料加工方式中,料件和加工后成品的所有权
  • 增值税发票销货清单哪里领
  • 3gwifi怎么用
  • 最小全画幅的数值是多少
  • 神舟战神k670c-g4e1游戏笔记本怎么样?
  • php实现执行外部操作
  • php将数据导出到excel
  • 计提补贴会计分录
  • 坏账准备的借贷方向表示什么意思
  • 报销钱大写数字
  • 增值税留抵税额可以结转下一年吗
  • vue笔记项目
  • pytorch csdn
  • 累计预扣法的适用条件
  • 发票清单怎么导出
  • mongodb怎么导入文件
  • python文件可分为哪几类
  • 转让债券应交的增值税税额
  • 一般纳税人企业所得税税率多少
  • 固定资产清理的审计目标不包括
  • 没有认证抵扣的发票如何冲红
  • 发行优先股的发行费用
  • 企业缴纳社保要下载什么软件
  • 财务软件无形资产有哪些
  • 残疾人保障金的工资按实发还是应发
  • 场地租赁费属于什么税收分类编码
  • 房地产企业销售商品房增值税税率
  • 小企业会计准则主要按照什么计量
  • MySQL索引背后的数据结构及算法原理
  • mysql重置初始密码
  • windows2000修改ip
  • centos7关闭kdump
  • RedHat 9.0下Apache+PHP+MySQL服务器安装配置
  • 电脑怎么装双系统win10和linux
  • linux读取命令
  • kdeskcore.exe是什么
  • win7还原按钮
  • 升级win10后c盘满了
  • linux的复制
  • 详解16型人格
  • php运行linux命令
  • cocos2dx-3.x(二)、坐标系
  • BUG: OpenGL error 0x0500 in -[CCEAGLView swapBuffers] 328
  • js兼容ie
  • javascript要怎么学
  • ubuntu修改默认桌面环境
  • android 内部存储
  • 新入职税务干部工作心得
  • 外省车险保单,有何不利的事
  • 辽宁交管12123能用微信支付吗
  • 税控盘可以换成ukey吗
  • 冀地是哪里
  • 增值税号和增值税账号的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设