Vue之性能优化篇

刺骨的言语ヽ痛彻心扉 2023-01-08 08:28 159阅读 0赞

# Vue之性能优化篇 #

> 跟大家讲一下关于优化Vue性能相关的知识，Vue众所周知，是一个轻量级的框架，源码仅仅为72.9KB，但是也有它自己的缺点，就是首屏加载会比较慢，因为和传统项目相比，Vue会在首屏加载的时候加载出所有的组件和插件，并且向服务器请求数据，导致可能有时候首屏加载的时间就会到4、5秒的样子。

> 但是这样做很明显是在挑战用户的耐心，按照惯例，最好能把加载时间控制在1秒左右。接下来小编讲一下Vue性能优化的两个个方向。

### 一．源码优化 ###

> 1、代码模块化，咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。

> 2、for循环设置key值，在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。

> 3、Vue路由设置成懒加载，当首屏渲染的时候，能够加快渲染速度。

> 4、更加理解Vue的生命周期，不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null。

> 5、可以使用keep-alive，keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。

### 二．打包优化 ###

> 1、修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，如果不关掉，生成环境是可以通过map去查看源码的，并且可以开启gzip压缩，使打包过后体积变小。

> 2、使用cdn的方式外部加载一些资源，比如vue-router、axios等Vue的周边插件，在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。

> 3、减少图片使用，因为对于网页来说，图片会占用很大一部分体积，所以，优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果，或者使用雪碧图来减少图片的体积。

> 4、按需引入，咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积。比如在使用element-ui库的时候，可以只引入需要用到的组件。

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关性能优化之缓存篇

1. 前言：为什么要用缓存？用户数增长，架构演变，数据量增大，开始考虑怎么去做性能优化。而性能优化的第一定律就是：优先考虑使用缓存。 2. 缓存的基本原理

「爱情、让人受尽委屈。」/ 2023年10月07日 08:11/ 0 赞/ 7 阅读

相关 Vue之性能优化篇

Vue之性能优化篇 > 跟大家讲一下关于优化Vue性能相关的知识，Vue众所周知，是一个轻量级的框架，源码仅仅为72.9KB，但是也有它自己的缺点，就是首屏加载会比较慢，

刺骨的言语ヽ痛彻心扉/ 2023年01月08日 08:28/ 0 赞/ 160 阅读

相关 Vue篇(001)-vue 中的性能优化

答案： 1、Vue 应用运行时性能优化措施（1）引入生产环境的 Vue 文件（2）使用单文件组件预编译模板（3）提取组件的 CSS 到单独到文件（4）利用Ob

矫情吗；*/ 2023年01月02日 02:23/ 0 赞/ 129 阅读

相关前端面试题之性能优化篇

前端面试题之性能优化篇一、CDN 1. CDN的概念 2. CDN的作用 3. CDN的原理

绝地灬酷狼/ 2022年10月16日 08:57/ 0 赞/ 238 阅读

相关 Android 性能优化之String篇

Android 性能优化之 String篇 > 关于String相关知识都是老掉牙的东西了，但我们经常可能在不经意的String 字符串拼接的情况下浪费内存，影响性能，也

分手后的思念是犯贱/ 2022年07月15日 05:55/ 0 赞/ 322 阅读

相关 Android 性能优化之String篇

Android 性能优化之 String篇 > 关于String相关知识都是老掉牙的东西了，但我们经常可能在不经意的String 字符串拼接的情况下浪费内存，影响性能，也

小灰灰/ 2022年07月15日 05:55/ 0 赞/ 231 阅读

相关 Vue性能优化

前言一般来说，你不需要太关心vue的运行时性能，它在运行时非常快，但付出的代价是初始化时相对较慢。在最近开发的一个Hybrid APP里，Android Webview

Dear 丶/ 2022年05月15日 06:59/ 0 赞/ 254 阅读

相关 Android性能优化之内存篇

性能优化一直是高级Android工程师必问的，这也往往涉及到对Java、JVM、Android运行机制、监控工具使用等全方位的知识点，是很好的面试方向。本篇会围绕Andro

Dear 丶/ 2022年01月20日 06:07/ 0 赞/ 339 阅读

相关前端性能优化之图片篇

　　一个网站，不管是从加载时所占带宽，还是服务器请求数量的角度来说，它所占的比例一般都是相当大的，如果图片处理不当，必将成为前端性能及SEO的一个瓶颈，导致带宽及硬件方面的投入

末蓝、/ 2022年01月16日 10:11/ 0 赞/ 312 阅读

相关 Webpack之性能优化篇

Webpack之性能优化篇 ![8974c9fd-6be9-4878-a1e2-dc62191ac91e.png_UCloudPublicKey_TOKEN_8d8b72

客官°小女子只卖身不卖艺/ 2021年09月01日 05:11/ 0 赞/ 805 阅读