位置: 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)(冰川湾国家公园的冰川不止有白色一种)

  • 个调税新政策
  • 代开运输发票会不会造成重复征税
  • 无形资产的税费计入
  • 上年营业收入是什么科目
  • 已经认证的发票可以作废吗
  • 所得税季报利润表怎么填
  • 现金形式发放的福利需要扣税吗
  • 出口退税自查中的“四自三不见”是指什么
  • 春节商家促销文案
  • 还没入库,发票已经给财务了 怎么办
  • 公司向税务局缴纳环保税
  • 固定资产期初余额在哪里录入
  • 股权转让金是什么意思
  • 商业企业购货分录
  • 公司造成损失要员工承担吗
  • 技术变动成本是指
  • 工厂产品的人工怎么算
  • 购车合同起什么作用
  • 蔬菜批发的利润怎么算
  • 预收房租款如何入账
  • 转增股本是股票股利吗
  • 分期付款购买商品
  • 既加工又有安装费的公司
  • 旅游业企业所得税要求
  • 主营业务收入如何确认
  • 采购开票税率
  • 税金当月计提当月缴纳
  • 补缴的附加税怎么入账
  • 如何在Windows 11上卸载更新
  • U盘复制文件提示文件过大
  • 电脑内存条是干什么的?
  • 基准收益率是
  • 进项税转出补交的增值税和附加税可以税前扣除吗
  • 电脑上一键复制是哪个键
  • win11预览版体验
  • 本年利润和利润总额的关系
  • 债券投资账务处理例题
  • 存货跌价准备是什么意思
  • linux的网络编程
  • 关于出售使用过的东西
  • 季度所得税表中营业收入填万元还是总金额
  • php excel导入数据
  • 嵌入式开关安装效果图
  • 当月增加的房产 要交房产税吗
  • 销售商品的折扣
  • 一般纳税人是否享受减免政策
  • 公司股东分红要交税吗?
  • 纳税人防伪税控设备未抄报怎么办
  • 长期股权投资中同一控制和非同一控制的区别
  • 初级会计实务重点内容
  • 出口货物免税的税种包括
  • 两种原因
  • 废料进口报关
  • 低值易耗品的金额
  • 怎样分辨假钱
  • 盘盈盘亏做好记录这句好怎么说
  • 公司财务部门工作职责
  • 往来款做其他应收还是其他应付
  • 福利设施的定义
  • win8.1无法启动怎么办
  • centos双网卡配置
  • 借助竹子赞美人物气节的诗句有哪些
  • mac怎么恢复出厂设置
  • macos time machine
  • linux的三个部分
  • windows8开机启动项在哪里设置
  • centos默认字体
  • android图像处理
  • 使用css的三种方式
  • js兼容ie
  • js中math.pow
  • 使用灭火器人要站在上风口还是下风口
  • 本地安装策略在哪里
  • python解析数据
  • python django事务transaction源码分析详解
  • linux的syslog配置
  • android开发是什么意思
  • jquery自定义的方法有哪些
  • 在进口环节海关代征的税种有
  • 华为领导班子成员名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设