vue上线的时候 如何做性能优化 / 如何解决单页面应用程序首次加载慢的问题（使用外部的cdn资源对vue项目做性能优化）

最新推荐文章于 2024-02-22 10:51:30 发布
最新推荐文章于 2024-02-22 10:51:30 发布
阅读量525 收藏 1
点赞数
分类专栏： 三-框架类 Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DcTbnk/article/details/107864725
版权

vue打包的时候如何做性能优化:

第一次打包vue的项目部署到服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案。

也就是第一次加载的文件内容太多，解决的办法就是将文件变小

第一个是使用动态路由的方式引入路由组件，用import方式引入，第二个是 图片懒加载：用插件
第三种是就是把我们的一些第三方资源库放在外部不进行打包的方式进行引入（把一些第三方库通过cdn方式引入，改一下配置文件，不打包进去），方法如下图所示：
在这里插入图片描述

在这里插入图片描述
cdn
在这里插入图片描述
在这里插入图片描述

咩有猫腻.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目使用CDN优化首屏加载问题
11-26
解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。 外部的库文件，可以使用CDN...
vue 项目首页加载速度优化以及解决首页白屏问题
郝峰vip的博客
12-14 1万+
Vue项目优化首页加载速度达到秒开以及解决首页白屏问题
vue项目打包优化--提高首屏加载速度
zhouxingqi_123的博客
11-07 972
开发过程中我们往往需要 console.log 进行调试，调试完后一般也会删除或注释掉，但难免有时会忘记，所以可以使用 terser-webpack-plugin 来清除 console.log。vue 脚手架默认开启了 preload 与 prefetch，当我们项目很大时，这个就成了首屏加载的最大元凶了。有一些js的依赖我们可以不用打包到我们程序中，可以使用cdn的方式来链接js的依赖文件。1、首先先看配置：在vue.config.js中设置不打包的文件。2、查看项目中文件依赖包的版本。
vue项目优化首屏加载速度
weixin_43794749的博客
04-26 2342
背景：后台管理系统部署到线上环境后，清空浏览器缓存，第一次加载时，加载速度达到了9秒之久。 从上面请求的接口可以看出来，第一次请求主要是app.js文件和chunk-libs.js文件，和一些element的第三方组件库请求速度很慢。 分析：app.js和chunk-libs.js包太大的原因，主要是因为项目中npm 下载引入的依赖包，都会打包进来，所以加载很慢 解决方案： 将项目依赖的第三方组件库，才有cdn引入的方式，来减少打包体积。但是cdn引入，也有缺点，就是地址的不稳定性等等。 这里优化采用.
vue实践笔记系列九——打包优化提升首屏加载速度_江南春008_新浪博客
jjh0901的博客
04-04 493
打包优化主要是减少打包后的文件体积，主要从以下两个方面入手 1、通过启用压缩，减小打包文件体积 1.安装compression-webpack-plugin插件，建议安装1.1.2版本，高版本会有报错，安装语句：npm install --save-dev compression-webpack-plugin@1.1.2 2.将config/index.js中的压缩属性produc...
【vue加载16秒优化到2秒】Vue3加载慢的性能优化，打包后页面静态资源chunk-vendors文件过大加载慢响应慢
热门推荐
赏樱看雪撸代码
12-12 1万+
vue构建后首页加载慢，vue首页加载特慢优化，vue3响应慢优化，vue页面加载慢优化，如何解决chunk-vendors.js文件大加载慢，如何优化vue加载慢，如何减少vue打包文件大小.
vue项目中用cdn优化的方法
08-28
本篇文章主要介绍了vue项目中用cdn优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue cl3、vuex、vue-router、ant design vue、axios搭建一个简易的单页面应用
01-20
使用vue、vuex、vue-router、ant design vue、axios搭建一个简易的单页面应用，页面风格样式使用ant design vue默认风格 1、有 登录页、人员列表、人员详情、人员编辑页面 2、所有页面需要有面包屑导
vue第一次加载慢怎么优化_vue如何优化首屏加载速度？面试过程遇到的性能优化问题...
weixin_33286939的博客
02-04 573
问题：vue如何优化首屏加载速度？问题描述：在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。解决方法是：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor....
Vue首次加载太慢之性能优化
weixin_56242672的博客
07-27 9418
首页加载很慢的问题。首次加载大概需要50s，页面才能出来。总结如下原因原因1由于vendor.js和app.css较大，UI渲染线程并不会优先加载他俩，但是VUE等主流的单页面框架都是js渲染htmlbody的,所以必须等到vendor.js和app.css加载完成后完整的界面才会显示。原因2还有一个原因就是单页面首次会把所有界面和接口都加载出来，会有多次的请求和响应，数据不能马上加载二者相加所以会有长时间的白屏。...
vue项目首屏加载优化
重楼的博客
10-15 5735
vue项目首屏加载优化1、存在的问题2、什么是首屏加载2.1 首屏加载时间的计算3、加载慢的原因4、解决的办法4.1 路由懒加载4.1.1 什么是路由懒加载？4.1.2 为什么需要懒加载呢？4.1.3 路由懒加载的原理4.1.4 如何实现路由懒加载？4.2 压缩图片4.3 gzip 压缩4.3.1 服务器压缩文件4.3.2 前端 webpack 打包生成 gz 文件4.4 Webpack打包体积优化4.4.1 splitChunks4.4.2 splitChunks优化5、时间轴回放 最近这几个月一直在开发
vue文件上传速度慢，有可能是nginx配置的问题
L_HAI_Q的博客
11-11 2024
排查问题以及解决方法 当我尝试了多种代码优化后发现上传速度还是一样慢，这时我发现每次文件上传网络流量很奇怪。如下图： 这时排查一下nginx的跨域配置，发现后端的配置是服务器的ip，将ip修改成localhost，修改的前提是前后端的项目是放在同一个服务器。 修改后结果 看下图，你会发现文件上传完后，上下行流量没有进行转换，上传的速度也大大提成。 记录一下自己踩过的坑，如果对你有帮助麻烦给博主一个赞鼓励一下✿✿ヽ(°▽°)ノ✿ ...
使用 Vue 的页面变慢的原因
最新发布
liuhao9999的博客
02-22 1620
综上所述，为了提高 Vue 页面的性能，可以采取多种措施，包括优化数据渲染、减少不必要的渲染、优化打包配置、调整组件结构以及选择合适的第三方库。同时，还可以使用性能分析工具来识别和解决性能瓶颈。
关于npm run build 卡住不动的坑。。。
weixin_30849403的博客
06-20 7402
起因：最近开发个项目使用的vue，有些功能需要生产版本放服务器上测试，这就出问题了。。卡住了，不动了，还不报错 这是在vscode的终端里面，试了git hash，试了cmd ， 试了powershell，都是一个样子，这就很尴尬了， 试着执行了 npm run dev， npm i，都能正常运行； 然后，又试了下cnpm i， 咦 ！ 有猫腻，一样卡住了 然后就百度了一哈，其实我搞不懂 c...
Vue打包优化篇-CDN加速
小生不才
08-06 6984
在没有使用cdn加速之前打包后数据如下，可以看出element-ui、vue、vuex、vue-router这些依赖都打进chunk-vendors.js中导致体积很大，假设再来很多依赖项是不是更大，同时也会影响单页面应用首屏加载速度，所以这里采用一种打包优化手段之一来分离依赖项。......
Vue项目CDN优化
weixin_47768980的博客
08-04 1433
当我们项目完成后，build后发现文件会比较大，部署到服务器上首页加载还比较慢，这都是打包资源太多的问题，照成文件比较大，加载比较慢，这个时候我们就可以使用CDN资源优化项目了 build后会打印出日志，会发现这个js文件很大，我当时的是1.6m。 废话不多说，优化如下 1.在vue.config.js 添加如下配置 // chainWebpack: config => { // //发布模式 // config.when(process.env.NODE_ENV === '
Vue单页应用首次加载太慢之性能优化
YunWisdom
01-09 2884
Vue单页应用首次加载太慢之性能优化 问题描述： 最近开发了一个单页应用，上线后发现页面初始加载要20s才能完成，这就很影响用户体验了，于是分析原因，发现页面加载时有个 vendor.js达到了3000多kb，于是在网上查找了一下原因，是因为我打包的时候把所有第三方依赖都打包放进去了；要怎么分离出去呢？ 看下面步骤： 一、解决打包后vendor.js 很大，导致上线...
vue单页面打包文件大？首次加载慢？解决方法如下：
weixin_44400506的博客
02-25 3232
这篇文章主要介绍了vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程,需要的朋友可以参考下 　　找到nginx多网站配置文件：类似 nginx/sites-available/www.baidu.com server { listen 80; index index.html index.htm index.nginx-debian.html; server_nam...
vue单页应用首次加载太慢之性能优化
weixin_43835827的博客
02-25 424
问题描述： 最近开发了一个单页应用，上线后发现页面初始加载要20s才能完成，这就很影响用户体验了，于是分析原因，发现页面加载时有个 vendor.js达到了3000多kb，于是在网上查找了一下原因，是因为我打包的时候把所有第三方依赖都打包放进去了；要怎么分离出去呢， 看下面步骤： 一、解决打包后vendor.js 很大，导致上线后页面首次加载速度异常慢： vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓慢的问题。
使用defer优化vue项目首次加载白屏时间
06-06
在Vue项目中，可以使用defer属性来优化首屏加载时间。defer属性的作用是让脚本在文档解析完成后才执行，这样可以避免脚本阻塞文档的解析和渲染过程。 具体做法是，在index.html中将Vue相关的脚本标签加上defer属性...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值