vue首页性能优化（vue性能优化）

本文目录一览：

• 1、Vue性能优化方法
• 2、vue 首屏页面性能优化
• 3、第 005 期 Vue 运行时性能优化之减少渲染组件的次数
• 4、vue性能优化，通过webpack
• 5、vue长列表性能优化

Vue性能优化方法

Vue前端开发到第一阶段，就要开始考虑性能优化相关的要点了。这也是用来判断一名前端的水平是否优秀的一个标准。接下来这篇文章，将介绍几种在实践过程中可以用到的性能优化技巧（文中例子来自 ）。

由于组件的生命周期处理在框架层面上十分耗时，所以，建议平常尽量使用函数型组件。这样，可以避免不必要的性能损失。只要在模板上声明 functional 属性，就可以实现函数式组件了：

另一个优化技巧是，将复杂的耗时计算处理放在子组件中进行处理：

平常在引用 computed 数据进行计算的时候，可以多使用局部变量，这样可以避免多次重复计算。

对于需要频繁切换的视图来说，使用 v-show 比 v-if 更加节约性能。因为 v-show 可以避免dom节点的销毁和重建，所以我们可以将如下的例子

改写为

另外一种很常用的优化技巧是使用 keep-alive ，通常是在路由切换组件中使用：

使用 keep-alive 后，可以保留组件状态并且避免重新渲染。

下面这个性能优化的点是前端通用的，可以用 requestAnimationFrame 分批次执行大数据量的计算,防止一次性执行的数据太大从而阻塞页面渲染。

比如下面这个例子：

可以改写为：

对于复杂的数据结构，我们可以显式声明为非响应式，这样可以避免很多不必要的计算，从而提高性能：

对于无限长列表来说，性能优化主要方法是保持仅渲染可视化部分。

来看一下下面这个例子：

这是最常见的写法，不过如果列表的内容很多，你就会发现页面十分的卡顿。此时大家可以利用 vue-virtual-scroller 这个组件，进行优化：

这样，可以大大提升组件的流畅度和性能。

vue 首屏页面性能优化

访问

目前采用引入依赖包生产环境的 js 文件方式加载，直接通过 window 可以访问暴露出的全局变量，不必通过 import 引入，Vue.use 去注册

在 vue.config.js 中配置 externals

npm install babel-plugin-transform-remove-console --save-dev

（1）安装依赖

npm i compression-webpack-plugin@5.0.1 --save-dev

（2）在 vue.config.js 配置

第 005 期 Vue 运行时性能优化之减少渲染组件的次数

减少组件的渲染次数，能提升 Vue App 的运行时性能。通过写法的优化，可以减少不必要的组件渲染次数。

开发中，我们会碰到用动态组件的情况。如多标签的页面，每个标签的内容是个动态组件:

标签来回切换，同一个组件会被重复渲染。用 keep-alive 包裹动态组件，可以缓存组件的渲染结果，保证同一个组件只被渲染一次。优化写法如下:

v-if 有更高的切换开销。 v-show 有更高的初始渲染开销，其值变化时，内容并不会重新渲染。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

插槽的数据发生改变时，旧的插槽写法，会导致插槽父组件的更新，插槽组件也就更新了。新的插槽写法只会更新插槽组件，少了更新父组件这过程。

旧的插槽写法:

Vue 2.6 加了新的插槽写法: v-slot 。如下:

了解更多插槽新写法的内容，见 Vue 2.6 发布了 。

vue性能优化，通过webpack

默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendors.******.js文件中，会导致该js文件过大，加载速度很慢。

我们可以通过externals排除这些包，使它们不被打包到js/chunk-vendors.******.js文件中，而是需要加载时去请求cdn资源。

vue.config.js里面配置configureWebpack，配置externals

这样完成后，再次打包，js文件会大大变小，加载速度非常棒。

使用vue-lazyload包，实现图片资源懒加载，组件懒加载

vue长列表性能优化

一、原因

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

二、原理

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

三、实现

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

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

四、效果

关于vue首页性能优化和vue性能优化的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注云尚网络www.ysfad.net。