位置: IT常识 - 正文

vue项目首屏加载过慢解决方案(vue项目首屏加载过慢)

编辑:rootadmin
vue项目首屏加载过慢解决方案 前言

推荐整理分享vue项目首屏加载过慢解决方案(vue项目首屏加载过慢),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue首屏白屏如何解决,vue项目首页加载慢,vue首屏加载优化简书,vue首屏加载优化简书,vue项目首页加载慢,vue怎么解决首次加载白屏问题,vue首屏加载优化简书,vue项目首屏加载过慢,内容如对您有帮助,希望把文章链接给更多的朋友!

因为我的一个vue项目首页打开加载了好久,所以决定优化一下。发现是打包体积太大了,页面才加载慢主要是第三方库。 优化着优化着就想要更好一点,于是逛博客搜索,参照了几个博主的解决方法整理出一下几点。​

一、防止编译文件中出现map文件

在 config/index.js 文件中将productionSourceMap的值设置为false.

二、使用CDN加载第三方库vue项目首屏加载过慢解决方案(vue项目首屏加载过慢)

在打包后发现chunk-vendor.js 文件占用内存特别大,这里面主要是使用的一些第三方库,例如 vue-router,axios,elementUI ,echarts等文件。 通过在index.html 中直接引入第三方资源来缓解我们服务器的压力,其原理是将我们的压力分给了其他服务器站点。 推荐外部的库文件使用CDN资源: bootstrap CDN:https://www.bootcdn.cn Staticfile CDN:https://www.staticfile.org jsDelivr CDN:https://www.jsdelivr.com 75 CDN:https://cdn.baomitu.com UNPKG:https://unpkg.com cdnjs:https://cdnjs.com

使用方法

第一步 在index.html文件中引入第三方库 第二步 去vue-config文件中去配置externals,写上你已经在index.html中引用了cdn的库。

三、图片资源压缩以及使用图片懒加载

可以用精灵图等减少http请求

四、vue-router 路由懒加载

懒加载即组件延迟加载,通常vue的页面在运行后进入都会有一个默认的页面,而其他未显示的页面只有在点击后才需要加载出来,实现按需请求,从而减少第一次加载的时候耗时。

懒加载路由配置:

const xxx= () => import('@/pages/xxx')五、gzip压缩

前端配置gzip压缩,并且服务端使用nginx开启gzip,用来减小网络传输的流量大小。 第一步 命令行执行:npm i compression-webpack-plugin -D 第二步 在webpack的dev开发配置文件中加入如下代码:

const CompressionWebpackPlugin = require('compression-webpack-plugin')plugins: [ new CompressionWebpackPlugin()]六、前端代码优化合理使用v-if和v-show使用定时器和回调函数等记得销毁避免意外的全局变量适当使用闭包避免内存泄漏
本文链接地址:https://www.jiuchutong.com/zhishi/297777.html 转载请保留说明!

上一篇:安装element ui(安装elementUI)

下一篇:CSS奇思妙想之-利用CSS裁剪(clip-path)完成各种图形(sbc奇思妙想)

  • 魅族 18 Pro支持内存容量扩展吗(魅族18pro支持红外遥控吗)

    魅族 18 Pro支持内存容量扩展吗(魅族18pro支持红外遥控吗)

  • 抖音一天可以关注多少人呢(恢复原来的抖音)

    抖音一天可以关注多少人呢(恢复原来的抖音)

  • 手机qq音乐怎么添加本地音乐(手机qq音乐怎么关闭自动播放)

    手机qq音乐怎么添加本地音乐(手机qq音乐怎么关闭自动播放)

  • iPhone11突然屏幕点不动(iphone11突然屏幕变暗)

    iPhone11突然屏幕点不动(iphone11突然屏幕变暗)

  • siri唤醒词能改嘛(siri能不能更改唤醒词)

    siri唤醒词能改嘛(siri能不能更改唤醒词)

  • iphone已停用请15分钟后再试怎么解决(iphone已停用请1分钟后再试是什么原因)

    iphone已停用请15分钟后再试怎么解决(iphone已停用请1分钟后再试是什么原因)

  • led显示屏怎么设置滚动显示内容?(led显示屏怎么设置滚动字幕)

    led显示屏怎么设置滚动显示内容?(led显示屏怎么设置滚动字幕)

  • nice直送能无理由退货吗(nice直送大概几天)

    nice直送能无理由退货吗(nice直送大概几天)

  • 手机进水扬声器沙哑会不会自动好(手机进水扬声器坏了怎么办)

    手机进水扬声器沙哑会不会自动好(手机进水扬声器坏了怎么办)

  • 苹果手机怎么改ID名字(苹果手机怎么改wifi密码修改)

    苹果手机怎么改ID名字(苹果手机怎么改wifi密码修改)

  • 抖音视频是什么格式(抖音视频是什么分辨率)

    抖音视频是什么格式(抖音视频是什么分辨率)

  • 苹果手机边充边玩对手机的影响大吗(苹果手机边充边玩发烫正常吗)

    苹果手机边充边玩对手机的影响大吗(苹果手机边充边玩发烫正常吗)

  • 主副显示器切换快捷键(主显示器副显示器)

    主副显示器切换快捷键(主显示器副显示器)

  • 苹果7怎么开视频美颜(苹果7怎么开视频聊天)

    苹果7怎么开视频美颜(苹果7怎么开视频聊天)

  • 代理服务器设置方法(浏览器的代理服务器设置)

    代理服务器设置方法(浏览器的代理服务器设置)

  • 余额宝体验金有啥用(余额宝体验金有钱吗)

    余额宝体验金有啥用(余额宝体验金有钱吗)

  • 华为手机亲情关怀怎么关闭(华为手机亲情关怀功能)

    华为手机亲情关怀怎么关闭(华为手机亲情关怀功能)

  • iphonex黑色主题设置(iphonexr黑色主题设置)

    iphonex黑色主题设置(iphonexr黑色主题设置)

  • 拼多多自动连抽怎么弄的(拼多多一直抽)

    拼多多自动连抽怎么弄的(拼多多一直抽)

  • 磁吸数据线毁坏手机吗(磁吸数据线头还能拔出来吗)

    磁吸数据线毁坏手机吗(磁吸数据线头还能拔出来吗)

  • 图片100px是多少厘米(图片100px等于多少厘米)

    图片100px是多少厘米(图片100px等于多少厘米)

  • excel受保护的视图怎么解除(excel受保护的视图怎么解除不掉怎么办)

    excel受保护的视图怎么解除(excel受保护的视图怎么解除不掉怎么办)

  • 手机腾讯视频二维码在哪里找到(手机腾讯视频二维码在哪里扫码登录)

    手机腾讯视频二维码在哪里找到(手机腾讯视频二维码在哪里扫码登录)

  • 小米9三个摄像头分别作用(小米9三个摄像头用法)

    小米9三个摄像头分别作用(小米9三个摄像头用法)

  • ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作(elementui form rules)

    ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作(elementui form rules)

  • 税控盘服务费全额抵扣分录
  • 财税新闻稿
  • 现在什么情况下
  • 会计账簿按外表形式分
  • 没有股权取得的分红如何交税?
  • 公司收生育津贴怎么入账
  • 已抵扣发票红冲后发票还给对方公司
  • 移动电子发票怎么发送到邮箱
  • 税务登记需要什么资料2022
  • 会计里面红字冲销是什么意思
  • 股东与公司之间是什么关系
  • 减征资源税中是否包含水资源税?
  • 政策性减免单位社保
  • win11开机选择系统
  • 怎样打开电脑wifi连接
  • 事业单位会计凭证收入怎么记账
  • 不开票收入申报是含税收入吗
  • linux中使用less命令分屏查看
  • mac压盘
  • 一次性所得个人所得税缴纳标准
  • MacOS Big Sur 11.3网页怎么设置时间限制?
  • 政策性搬迁补偿收入如何财税处理
  • 企业汇算清缴费用
  • 企业所得税如何更正申报
  • 损益类账户的期末余额一般在借方还是贷方
  • 月底资产负债表不平怎么找原因
  • phpunit
  • web前后端连接
  • java后端代码例子
  • java中通配符作用
  • 跨平台 gui
  • 只有销售才能使你成功的名言
  • 信息技术服务费税收编码
  • 对公账号备用金怎么用
  • 公司年底封账时间
  • wordpress主题安装好后怎么设置
  • 注册资金印花税税率是多少,怎么计算?
  • 不动产作价出资入股登记收件
  • 一般纳税人之外还有什么
  • 收到银行承兑汇票如何记账
  • 红冲以前年度的费用怎么做账
  • 什么叫同级财政收支
  • 房地产竣工验收后结转收入和成本
  • 交易性金融资产公允价值变动怎么算
  • 应收账款增加给哪一方
  • 回收材料的好处和问题
  • 超市的进场费怎么入会计科目
  • 应付账款一直挂着,怎么消掉
  • 记账凭证可以先做贷方吗
  • 凭证扣除 28号
  • 其他应付款贷方表示什么意思
  • 知识产权代理所代理
  • 企业出售投资性房地产应按照售价与账面价值
  • 企业取得的土地使用权用于自行开发建造厂房
  • 应收账款较多怎么办
  • mysql判断字符长度
  • MySQL存储过程与触发器
  • linux系统清理磁盘空间
  • windows下命令
  • win8系统怎么查看隐藏文件
  • centos7挂载cdrom
  • yum源如何配置
  • 请问usb是什么意思啊
  • win7开始菜单路径在哪里
  • win10手机预览版
  • linux 静态库
  • Linux系统安全性体现在哪些方面?
  • win10预览版好吗
  • win10用户账户guest
  • 使用NGUI发布报错的解决方案
  • 相机渲染图片
  • 用kotlin开发android
  • 创建nodejs项目的步骤
  • python 内置函数名作为变量名
  • 开发者共享是什么意思
  • 税务咨询电话是什么
  • 全电发票
  • 税控盘如何分配发票
  • 南方电网统一供应链平台
  • 财税招商专员是做什么的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设