vue的性能优化有哪些方法（vue3性能优化）

本篇文章给大家谈谈vue的性能优化有哪些方法，以及vue3性能优化对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Vue2.6.10(Vue-cli4)项目打包性能优化实践
• 2、vue性能优化，通过webpack
• 3、vue长列表性能优化
• 4、vue 首屏页面性能优化
• 5、第 005 期 Vue 运行时性能优化之减少渲染组件的次数

Vue2.6.10(Vue-cli4)项目打包性能优化实践

在 src 下新建 Skeleton 文件夹，其中新建 index.js 以及 index.vue ，在其中写入以下内容，其中，骨架屏的 index.vue 页面样式请自行编辑

在 vue.config.js 中写入以下内容

所以，最终的配置文件如下

在 src 下新建 Skeleton 文件夹，其中新建 index.js 以及 index.vue ，在其中写入以下内容，其中，骨架屏的 index.vue 页面样式请自行编辑

在 vue.config.js 中写入以下内容

所以，最终的配置文件如下

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 首屏页面性能优化

访问

目前采用引入依赖包生产环境的 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的性能优化有哪些方法和vue3性能优化的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。