优化vue项目首页加载过慢

最新推荐文章于 2024-05-21 23:21:19 发布
VIP文章 最新推荐文章于 2024-05-21 23:21:19 发布
阅读量6.5k 收藏 14
点赞数
分类专栏： vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44738273/article/details/88313857
版权

最近碰到vue项目打包上线后，第一次打开首页后会出现空白、加载时间过长的情况，百度了几种优化的方法，自己总结一下。

1.首先要弄清楚为什么会出现这种情况

在Chrome浏览器打开项目的时候，按F12可以看页面在加载的情况，结果发现是这个app.js太大，居然加载了有9秒之多
在这里插入图片描述
找到这个“病毒”后，我们就来对症下药。
项目用webpack打包的过程在这里插入图片描述
打包的app.js有892kb，已经提示过大，另外还有一些生成的map文件。（1）先将多余的map文件去掉，找到config文件夹下index.js文件,把这个build里面的productionSourceMap改成false即可

最低0.47元/天 解锁文章
阿宇大男神
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue项目首屏打开速度慢的解决方法
12-07
最近接手了一个后台管理系统，技术栈主要是vue全家桶+elementui，老大打开测试环境页面的时候，说看到首页需要6秒钟，那如何进行优化呢？ 首先我们需要安装webpack-bundle-analyzer // webpack.prod.conf.js if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyz
解决页面中引用了谷歌字体库访问缓慢的问题
Kevin的博客
03-16 8347
解决页面中引用了谷歌字体库访问缓慢的问题 这段时间做一个项目的时候遇到了页面访问谷歌字体库加载缓慢的问题。通过将google字体库本地化解决了问题。
vue如何优化首页加载速度
dxn16638400024的博客
03-10 490
可以使用 Vue Router 的懒加载功能来实现路由组件的按需加载，或者使用动态 import() 来实现模块的按需加载。对于页面中的组件，可以将一部分组件延迟加载，只在需要时才加载和渲染。可以设置静态资源的缓存头信息，或者使用 Vue Router 的路由缓存功能来缓存页面组件。可以使用 Webpack 的代码拆分功能和文件合并插件来优化静态资源的加载。使用 CDN（内容分发网络）来加速静态资源的加载，将静态资源部署到全球各地的 CDN 节点，减少网络延迟和提高资源加载速度。
谷歌字体fonts.googleapis.com等打开很慢解决方案
star8521的专栏
03-13 3491
有时候，引用了一些UI框架后，会加载会很慢，打开Network查看发现"罪魁祸首"是UI中引用了谷歌字体fonts.googleapis.com，由于一些原因，无法正常访问，就收集了一些谷歌有关资源的加速地址。 谷歌字体库（Google Fonts） 源地址：//fonts.googleapis.com/css?family=Open+Sans 极客族加速：//fonts.geekzu.org/css?family=Open+Sans loli加速：//fonts.loli.net/css?fam.
vue3----解决字体包太大响应慢以及打包文件大的问题 && 解决font-spider 报错问题
heavenz19的博客
07-03 1837
使用font-spider压缩字体（亲测可用）
解决网站因调用谷歌字体库打开慢（适用wordpress和调用谷歌内容的网站）
wwwwestcn的博客
03-30 577
原因是网站调用的google字体库，因被屏蔽导致国内站点无法连接字体库，出现了打开慢的情况，在此替换成另一个网址来解决此问题。 若是我司windows虚拟主机，在虚拟主机管理面板，打开文件管理功能，页面上方工具栏有替换功能先选择好要替换文件的目录，默认是\可以不修改，让后下面查找字符串fonts.googleapis.com或fonts.useso.com替换为fonts.geekzu.org，请见截图 替换调用的字体库链接： 输入要替换的字符串（注意替换的字符前面或后面一定不要有空格）：
字体包过大导致加载慢
wen_j的博客
09-17 1182
在项目中引入字体包，字体包文件过大，导致加载慢，使用字蛛（font-spider)使用 1.安装font-spider(全局安装) npm install font-spider -g 2.检查是否安装成功 font-spider --version 3.新建font.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
vue-cli 首屏加载优化问题
10-17
主要介绍了vue-cli 首屏加载优化问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue项目首屏加载时间优化实战
10-17
单页面应用的一个问题就是首页加载东西过多，加载时间过长。特别在移动端，单页面应用的首屏加载优化更是绕不开的话题，这篇文章主要介绍了vue项目首屏加载时间优化实战，感兴趣的小伙伴们可以参考一下
Vue-Cli项目优化操作的实现
12-13
由Vue-Cli（2.X）生成的Vue项目中存在着首屏加载过慢，编译资源过大等问题，主要针对这些问题对项目进行相应的优化，提升项目响应速度，优化项目性能。 操作 路由懒加载 在Vue-router官方文档中有针对懒加载的介绍...
详解vue页面首次加载缓慢原因及解决方案
12-13
第一次打包vue的项目部署到服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会...
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 168
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 686
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1137
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
综合性练习-验证码
cj13106811623的博客
05-15 834
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
【VueRouter 的基本使用】
2302_76611599的博客
05-17 176
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 823
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
性能监控系统搭建——node_koa实现性能监控数据上报（第一章）
编程知识分享，主打前端
05-19 755
大家好，我是yma16，本文分享node_koa实现性能监控数据上报（第一章）。为了实现前端性能耗时的数据监控，前端对外发布js的sdk，sdk的功能主要是性能耗时计算和数据上报。同时使用vue3和node开发一个数据监控的后台管理系统，主要功能是展示数据，提供一个api_key和token对外暴露的api接口去添加数据监控数据。对外暴露性能上报接口，用户通过api_key请求上报数据到后台。
python EEL + vue3.js 简单示例
bigcarp的专栏
05-15 209
eel官方示例中暴露的js函数是全局函数，vue中的自定义函数作用域通常都是组件范围内。要让eel.js调用，需要将其升为全局可用。一般方法有 app.config.globalProperties 或 mixin等。
vue-timce加载过慢
07-27
Vue项目加载过慢可能是由于多种原因引起的。其中一种可能是因为没有使用路由懒加载的方式加载组件。路由懒加载是一种优化技术，可以在需要的时候才加载对应的页面资源，而不是一次性将所有页面资源打包部署到一块。这样可以避免不必要的资源加载，提高页面加载速度。\[1\] 另外，如果你在项目中使用了视频播放功能，可能也会导致加载速度变慢。特别是如果没有对视频资源进行优化处理，或者没有使用合适的插件来处理视频播放，都可能会影响页面加载速度。\[2\] 此外，还有可能是因为前端路由的配置不合理导致加载速度变慢。前端路由描述了URL和UI之间的映射关系，如果路由配置过多或者嵌套层级过深，都可能导致加载速度变慢。建议对路由进行优化，减少不必要的路由配置，简化路由结构，提高加载速度。\[3\] 综上所述，如果Vue项目加载过慢，可以考虑使用路由懒加载来优化组件加载，对视频资源进行优化处理，以及优化前端路由配置，减少不必要的路由配置和嵌套层级，从而提高页面加载速度。 #### 引用[.reference_title] - *1* *3* [vue-router路由懒加载](https://blog.csdn.net/longgege001/article/details/127263698)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue-视频加载（vue-video-player）支持.mp4.m3u8.flv.mov格式](https://blog.csdn.net/niexier/article/details/117461895)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值