Vue的首屏加载优化方案

最新推荐文章于 2024-05-10 08:39:03 发布
最新推荐文章于 2024-05-10 08:39:03 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： 性能优化 文章标签： vue.js javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41308489/article/details/122590481
版权

优化方案

  1. 使用CDN资源，减少打包体积，提高速度。
  2. 路由懒加载
  3. 把静态资源也放在CDN
  4. 第三方组件库UI框架，使用按需引入（Tree Shaking）
  5. nginx开启gzip打包压缩

方案一

这里我们要实践的是使用CDN资源，减少包体积，提高首屏加载速度。

（1）用webpack的一个插件: webpack-bundle-analyzer辅助我们分析。
（2）首先我们全局引用包。
在这里插入图片描述

（3）在vue.config.js配置去除引用的第三方包。
在这里插入图片描述

（4）使用第三方CDN资源引入。
在这里插入图片描述

优化前和优化后的差别

  1. 优化前的包体积: 869.08KB

在这里插入图片描述

  1. 优化后的包体积：30.27kb
    在这里插入图片描述
Jiabing Yu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈VUE单页应用首屏加载速度优化方案
10-18
为了提升用户体验，本文将探讨几种针对 Vue 首屏加载速度的优化方案。 首先，利用 CDN（内容分发网络）资源能显著减小服务器带宽压力。将 Vue、Vue Router、Vuex 和 Vue Resource 等常用库从本地项目中移出，改为从...
关于Vue单页面应用的首屏加载优化
weixin_45791692的博客
04-01 8971
Vue单页面应用的首屏加载优化
vue项目首屏加载优化
重楼的博客
10-15 5793
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、时间轴回放 最近这几个月一直在开发
vue3项目页面首次加载慢优化
最新发布
油墨香^-^的博客
05-10 263
使用了gzip压缩以后，首次加载的时间就很短了，当然还有其他优化的方法需要去尝试，比如服务端渲染、预渲染、使用在线cdn等。
Vue项目首次加载慢的优化方法
qq_33437985的博客
05-12 5749
Vue组件按需加载，用v-if代替v-show 图片延迟加载，等页面主体加载好后，再加载
Vue首屏加载优化
qq_32998753的博客
03-13 2306
Vue首屏加载优化，打包优化：移除preload与prefetch、开启gzip压缩、公共代码抽离、CDN替换依赖包引入、移除无用文件，路由优化：动态路由，按需加载，动态添加路由
Vue首屏加载速度如何优化提升80%？本文详解
QQ2352108083的博客
06-11 2218
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。可以看个例子： 差点忘记介绍了：我是一名08年出道的高级前端老鸟，大家如果想跟我交流学习经验，可以进我的扣扣裙 519293536 有问题我都会尽力帮大家。主要是中高级问题，小白勿进哦 这是优化前的页面加载状态：执行npm run build打包项目，出来的vendeor...
vue项目首屏加载时间优化实战
12-09
特别在移动端，单页面应用的首屏加载优化更是绕不开的话题。下面我会写出我在项目中做的一些优化，希望大家能够相互讨论，共同进步。 我的项目 vue-cli3构建的，vue+vue-router+vuex，UI框架选用 element-ui，ajax...
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
10-18
以下是针对Vue.js项目打包后首屏加载优化的一些关键点以及可能遇到的问题及解决方案。 **一、使用CDN资源** 将依赖库如Vue、axios、vuex和vue-router等通过Content Delivery Network (CDN) 外链引入，可以显著减少...
详解vue项目首页加载速度优化
08-29
详解 Vue 项目首页加载速度优化 在单页应用（SPA）项目中，特别是在移动端应用中，首页加载速度是一个绕不过去的话题。本文将介绍 Vue 项目首页加载速度优化的实践经验，并对相关的知识点进行总结。 知识点 1：第...
【vue 首屏加载优化】
前端-CV全粘工程师
10-04 430
使用 Vue SSR（服务端渲染）：SSR 可以将 Vue 组件在服务端直接渲染为 HTML，然后再将渲染结果发送到客户端，这样可以大大缩短首屏加载时间。Vue 首屏加载优化指的是通过一系列的技术手段，尽可能地缩短首屏（即页面中可见的部分）的加载时间，提高用户体验。配置 webpack 的代码分割：将代码按照不同的功能或页面进行分割，提高首屏加载速度。使用懒加载：将页面中的图片、视频等资源分割成多个部分，只有在用户需要访问的时候才加载。使用异步组件：将页面中的某些组件异步加载，可以降低首屏加载所需的时间。
Vue解决首屏加载缓慢的首屏优化秒开(亲测有效)
qq_41429765的博客
07-07 2798
在vue.config.js文件中（1）.使用chainWebpack配置的方式（1）首先在public/index.html文件中将Vue或UI相关的js包引入main.js文件中的修改，将引入的import引入vue这个去掉，然后直接使用Vue注册vant,这个vant也不需要引入，因为在步骤一里面已经引入了vant.js包router.js文件的修改,去掉引入Vue，不引入vue-router,直接注册VueRouteraxios.js文件的修改，不需要引入axios直接使用。
vue 项目首页加载速度优化以及解决首页白屏问题
热门推荐
郝峰vip的博客
12-14 1万+
Vue项目优化首页加载速度达到秒开以及解决首页白屏问题
vue项目首屏加载过慢解决方案
weixin_46466212的博客
09-29 8136
前端vue项目优化首屏渲染速度
vue首屏优化方案
weixin_52607811的博客
11-26 1531
① 性能测试工具： Pingdom Website Speed Test | Pingdom Tools ②安装webpack-bundle-analyzer安装命令npm i webpack-bundle-analyzer -D 然后在webpack的dev开发模式配置中，引入插件，代码如下： const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') plugins: [ new BundleAnalyzer...
vue首屏优化
sun_qqq的博客
02-06 289
使用vue，首屏优化是避不开的问题。
如何对Vue首屏加载实现优化
Quentin0823的博客
08-05 623
前端总是在优化的路上 对Vue首屏加载实现优化大概总结为以下几点：
vue：首屏加载优化方案
mosowe
09-22 1920
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script src="https://unpkg.com/vue-router@3.2.0/dist/vue-router.js"></script> <script src="https://unpkg.com/vuex@3.4.0"></script> <script src="https://c
vue首屏加载优化总结及整理
Curry的博客
06-28 2926
基于vue的页面加载优化详谈，主要列举了部分优化的点，包括客户端以及服务端
vue 部署 图片加载
08-17
- *1* [详解vue页面首次加载缓慢原因及解决方案](https://download.csdn.net/download/weixin_38637665/13670909)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值