位置: 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奇思妙想)

  • 手机wifi已连接但无法访问网络(手机连接wifi显示已连接不能上网)

    手机wifi已连接但无法访问网络(手机连接wifi显示已连接不能上网)

  • b站魔力赏怎么玩

    b站魔力赏怎么玩

  • 微信咋发朋友圈

    微信咋发朋友圈

  • 爱奇艺账号总是自动退出(爱奇艺账号总是被挤掉)

    爱奇艺账号总是自动退出(爱奇艺账号总是被挤掉)

  • 微信支出总额怎么查(微信支出总额怎么设置)

    微信支出总额怎么查(微信支出总额怎么设置)

  • miui11比miui10省电吗(小米10miui11最省电版本)

    miui11比miui10省电吗(小米10miui11最省电版本)

  • 购买电脑怎么看内存插槽数目(购买电脑怎么看配置参数)

    购买电脑怎么看内存插槽数目(购买电脑怎么看配置参数)

  • 苹果8p微信怎么设置夜间模式(苹果8P微信怎么添加其他应用打开)

    苹果8p微信怎么设置夜间模式(苹果8P微信怎么添加其他应用打开)

  • 办事通怎么注册不了

    办事通怎么注册不了

  • 海韵电源是哪个国家的(海韵电源哪个好)

    海韵电源是哪个国家的(海韵电源哪个好)

  • 小红书删除的笔记能恢复吗(小红书删除的笔记怎么找回来)

    小红书删除的笔记能恢复吗(小红书删除的笔记怎么找回来)

  • 华为mate30怎么卸载软件(华为mate30怎么卸载桌面软件)

    华为mate30怎么卸载软件(华为mate30怎么卸载桌面软件)

  • 华为p30有没有息屏显示(华为p30有屏息功能吗)

    华为p30有没有息屏显示(华为p30有屏息功能吗)

  • 手机如何设置紫光灯(手机怎么设置紫色灯光)

    手机如何设置紫光灯(手机怎么设置紫色灯光)

  • 翻新机有什么坏处(翻新机有问题吗)

    翻新机有什么坏处(翻新机有问题吗)

  • 如何设置试卷的密封线(如何设置试卷的装订线及姓名那栏)

    如何设置试卷的密封线(如何设置试卷的装订线及姓名那栏)

  • 怎么看自己的腾讯会员谁在用(怎么看自己的腾讯账号登陆了几台设备)

    怎么看自己的腾讯会员谁在用(怎么看自己的腾讯账号登陆了几台设备)

  • 为什么苹果订阅里面没有取消(为什么苹果订阅打不开)

    为什么苹果订阅里面没有取消(为什么苹果订阅打不开)

  • cpu性能排行榜天梯图2022(cpu性能排行榜天梯图快科技)

    cpu性能排行榜天梯图2022(cpu性能排行榜天梯图快科技)

  • 基于Python的Flask WEB框架实现后台权限管理系统(含数据库),内容包含:用户管理、角色管理、资源管理和机构管理(基于Python的flask百战电商流程图)

    基于Python的Flask WEB框架实现后台权限管理系统(含数据库),内容包含:用户管理、角色管理、资源管理和机构管理(基于Python的flask百战电商流程图)

  • echarts 柱状图滚动(echarts 柱状图滚动与gridlayout移动冲突)

    echarts 柱状图滚动(echarts 柱状图滚动与gridlayout移动冲突)

  • phpcms v9附件目录创建不成功怎么办(带附件的目录)

    phpcms v9附件目录创建不成功怎么办(带附件的目录)

  • 劳务费发票报销
  • 节税是什么意思
  • 递延所得税计算表模板
  • 出口货物退免税管理办法
  • 固定资产变卖怎么开票
  • 加盟费是怎么回事
  • 收到房屋租金税率
  • 软件开发里面的人天
  • 多缴纳个人所得税怎么办
  • 卷烟消费税纳税环节有几个
  • 个人非专利技术转让属于什么收入
  • 国有资产报废如何委托拍卖公司
  • 税费和应交税费一样吗
  • 结转税金为贷方怎么结转?
  • 折价购入
  • 企业将存货低价出售处理要如何做会计处理?
  • 车辆租赁合同印花税怎么算
  • 卷式发票有税率吗
  • 酒店会计账务处理及税务申报
  • 7年利率多少
  • 预收美元和发票的关系
  • 员工报销款应该挂什么科目
  • 委外加工费用会计分录
  • linux grep显示行数
  • 修改系统散热方案
  • 公司之间转移固定资产
  • 往来款能转为投资款的说明
  • 劳动法律法规包含哪些
  • 股票发行费用怎么算
  • 终止劳动合同赔偿需要缴税吗
  • 陈列费用明细表怎么做
  • 怎么查商品的税率
  • node js教程
  • 逐帧flash动画
  • 长期挂账的其他应付款税务风险
  • 企业应付职工薪酬
  • 建筑施工企业增值税老项目过度期成本票
  • 一般纳税人只有销项没有进项
  • mysql百万级数据分页查询优化
  • 收到赔偿金怎么写收据?
  • 购买银行短期理财产品的会计处理
  • 装修行业小规模最高能开几个点的票
  • 职工报销费用
  • 未取得发票如何报销
  • 员工社保报销流程
  • 加权平均净资产收益率公式
  • 购进材料无发票会计分录
  • 外资企业的含义
  • 所有者权益的概念和特征
  • 可供出售金融资产有哪些
  • mysqlbinlog -vvv
  • mysql正则表达式匹配数字
  • sql批量导出数据
  • mysql优化十大技巧
  • mysql复制数据
  • win7系统设置打印机共享
  • win10打开或关闭
  • ubuntu安装配置静态ip地址
  • mac系统怎么删除用户
  • linux删除用户组和用户
  • fsc文件用什么软件打开
  • 解决登陆xp系统问题
  • grep正则表达式运用举例
  • win7如何变快
  • lua struct
  • unity项目资源
  • 一个监控网卡流量够用吗
  • pval 胶水
  • python调用bash
  • .es6文件
  • python pdf操作
  • jQ处理xml文件和xml字符串的方法(详解)
  • python文件处理方法
  • unity uGUI按钮点击换图
  • 湖南增值税普通发票查询系统官网
  • 地方税务局发票查询
  • 临沂二套房契税收费标准2023年
  • 税务ca证书过期
  • 怎么批量打开excel文件
  • 普惠性税收优惠政策例子
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设