vue优化方案(如何优化vue项目)

今天给各位分享vue优化方案的知识,其中也会对如何优化vue项目进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

vue 打包文件体积过大优化

因app首页加载不流畅,于是去检查首页加载项的耗时,最终发现是前端加载时js文件太大,导致首页加载太慢,于是选择了以下方案进行优化。

一、安装compression-webpack-plugin插件。前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件,可以大大提升文件加载的速度。

二、接下来要去修改vue的配置文件 vue.config.js

三 打包后对比

vue长列表性能优化

一、原因

当页面dom元素太多时浏览器渲染速度就会变慢,当浏览器内存不足时甚至会导致浏览器卡顿或者卡死等现象。因此对症下药,解决方案就是减少页面dom的渲染。

二、原理

可以通过按需进行加载dom,即只显示可视化区域的数量。从而减少dom的结构,实现性能提升。因此,分页加载、懒加载等方案根本治标不治本。

三、实现

此文章基于 vue-virtual-scroll-list 第三方插件,通过虚拟列表进行滚动加载数据。

2个关键的参数,分别是size和keeps。size属性指每一行高度,默认50px,keeps属性指每一行显示个数, 默认30个。

四、效果

使用vue后怎么针对搜索引擎做SEO优化?

适用于vue的SEO优化方案,以下几种:

(1)ssr,即单页面后台渲染

(2)vue-meta-info 与prerender-spa-plugin 预渲染

(3)nuxt

(4)phantomjs

vue打包优化——vendor体积过大

在vue.config.js文件中的chainWebpack配置插件,默认会在8888端口打开

根据之前打包分析图来看,主要是locale下moment的其他语言包占用体积较大。默认是en的语言包,所以在无需其他语言的情况下,可以直接忽略掉locale下的文件不打包。

解决方案:用webpack自带的IgnorePlugin插件

vue.config.js文件

将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首开的目的。

外部的库文件,可以使用CDN资源,或者别的服务器资源等。

cdn引入的地址可以参考官网

也可以像这篇文章是直接在vue.config.js中配置cdn的url地址 vue-cli3打包项目引入外部CDN资源文件

moment的其他语言包没有被打包了,vue等文件也都用的cdn文件,没有被打包进去vendor。

vue性能优化之build后包体积太大

基于vue-cli3.0构建项目,npm引入多个第三方包。build之后,包体积太大导致首屏过长。----毫无体验感!!!

实践的项目喜欢捣鼓可以clone下来

项目地址: vue-fiction

只总结了亲测效果明显的几种方案,解决方案大多来自于日常总结及各路大佬,如有不足,请大佬补充~

当我们运行项目并且打包的时候,会发现chunk-vendors.js这个文件非常大,那是因为webpack将所有的依赖全都压缩到了这个文件里面,这时我们可以将其拆分,将所有的依赖都打包成单独的js。

vue优化方案(如何优化vue项目),vue优化方案,信息,1,第三方,第1张

vue优化方案的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于如何优化vue项目、vue优化方案的信息别忘了在本站进行查找喔。


【免责声明】:

本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

【关于转载】:

本站尊重互联网版权体系,本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读,无任何商业用途,所有内容版权归原作者所有
如本站(文章、内容、图片、视频)任何资料有侵权,先说声抱歉;麻烦您请联系请后台提交工单,我们会立即删除、维护您的权益。非常感谢您的理解。

【附】:

二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

注:本站资源来自网络转载,版权归原作者和公司所有,如果有侵犯到您的权益,请第一时间联系我们处理!

-----------------------------------------------------------------------------------------------------------

【版权声明】:

一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、如有内容侵犯您的版权或其他利益的,请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后,情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------



源码村资源网 » vue优化方案(如何优化vue项目)
您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论