总结4个方面优化Vue项目

2024-09-27 17:19:12

运行时优化

1、使用v-if代替v-show

两者的区别是：v-if不渲染DOM，v-show会预渲染DOM

除以下情况使用v-show，其他情况尽量使用v-if

有预渲染需求

需要频繁切换显示状态

2、v-for必须加上key，并避免同时使用v-if

一般我们在两种常见的情况下会倾向于这样做:

为了过滤一个列表中的项目
比如 v-for="user in users" v-if="user.isActive"。在这种情形下，请将 users替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表

为了避免渲染本应该被隐藏的列表
比如 v-for="user in users" v-if="shouldShowUsers"。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)

3、事件及时销毁

Vue组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。

也就是说，在js内使用addEventListener等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露，如：

created() {
 addEventListener('touchmove', this.touchmove, false)
},
beforeDestroy() {
 removeEventListener('touchmove', this.touchmove, false)
}

首屏优化

1、图片裁剪、使用webp

图片需要裁剪，一般使用二倍图即可
尽量使用webp图片
如果使用了vue-lazyload插件，可以使用以下方法一键替换webp（替换使用v-lazy指令的图片）

Vue.use(VueLazyload, {
 error: require('./assets/img/defaultpic_small.png'),
 filter: {
 webp (listener: any, options: any) {
 if (!options.supportWebp) return
 // listener.src += '.webp'
 }
 }
});

2、资源提前请求

经测试，Vue项目中各文件的加载顺序为：router.js、main.js、App.vue、[-page-].vue、[component].vue，如图：

其中，router的加载时间相比于page.vue快近100ms，如果page.vue的文件较多，时间差异会更大

所以，可以在页面挂载、渲染的同时去请求接口数据，如在router.js中请求数据：

import Router from 'vue-router'
import store from './store'

store.dispatch('initAjax')

3、异步路由

使用异步路由可以根据URL自动加载所需页面的资源，并且不会造成页面阻塞，较适用于移动端页面

建议主页面直接import，非主页面使用异步路由

使用方式：

{
 path: '/order',
 component: () => import('./views/order.vue')
}

4、异步组件

不需要首屏加载的组件都使用异步组件的方式来加载（如多tab），包括需要触发条件的动作也使用异步组件（如弹窗）
使用方式为：v-if来控制显示时机，引入组件的Promise即可

<template>
 <div>
 <HellowWorld v-if="showHello" />
 </div>
</template>
<script>
export default {
 components: { HellowWorld: () => import('../components/HelloWorld.vue') },
 data() {
 return {
 showHello: false
 }
 },
 methods: {
 initAsync() {
 addEventListener('scroll', (e) => {
 if (scrollY > 100) {
 this.showHello = true
 }
 })
 }
 }
}
</script>

5、使用轻量级插件、异步插件

使用webpack-bundle-analyzer查看项目所有包的体积大小，较大的插件包尽量寻找轻量级的替代方案

首屏用不到的插件、或只在特定场景才会用到的插件使用异步加载（如定位插件，部分情况可以通过URL传递经纬度；或生成画报插件，需要在点击时触发）；插件第一次加载后缓存在本地，使用方式为：

// 以定位插件为例
const latitude = getUrlParam('latitude')
const longitude = getUrlParam('longitude')
// 如果没有经纬度参数，则使用定位插件来获取经纬度
if (!latitude || !longitude) {
 // 首次加载定位插件
 // webpack4写法，若使用webpack3及以下，则await import('locationPlugin')即可
 if (!this.WhereAmI) this.WhereAmI = (await import('locationPlugin')).default
 // do sth...
}

6、公用CDN

使用公用的CDN资源，可以起到缓存作用，并减少打包体积

网络优化

1、减少网络请求

浏览器对同一时间针对同一域名下的请求有一定数量限制（一般是6个），超过限制数目的请求会被阻塞
首屏尽可能减少同域名的请求，包括接口和js；按需减少首屏的chunk.js，合并接口请求

2、合理使用preload、dns-prefetch、prefetch

preload具有较高的加载优先级，它可以利用间隙时间预加载资源，将加载和执行分离开，不阻塞渲染和document的onload事件
每次与域名连接都需要进行DNS解析，使用dns-prefetch可以预解析域名的DNS
prefetch会预加载页面将来可能用到的一些资源，优先级较低；对首屏渲染要求较高的项目不建议使用

三者的使用方式，在head标签中添加（vue-cli-3已经做了相应配置）：

<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="icon" href="/dist/favicon.ico" rel="external nofollow" />
 <!-- dns-prefetch写法 -->
 <link rel="dns-prefetch" href="//www.dpfile.com" rel="external nofollow" />
 <title>md-config</title>
 <!-- preload写法，as属性必须 -->
 <link href="/dist/css/app.52dd885e.css" rel="external nofollow" rel="preload" as="style" />
 <link href="/dist/js/app.05faf3b5.js" rel="external nofollow" rel="preload" as="script" />
 <link href="/dist/js/chunk-vendors.04343b1f.js" rel="external nofollow" rel="external nofollow" rel="preload" as="script" />
 <!-- prefetch写法 -->
 <link href="/dist/js/chunk-vendors.04343b1f.js" rel="external nofollow" rel="external nofollow" rel="prefetch" />
</head>

3、PWA

PWA支持缓存HTML文档、接口（get）等，降低页面白屏时间
这样即使在弱网甚至断网情况下，也能迅速展示出页面

编译打包优化

1、升级Vue-Cli-3

vue-cli-3采用webpack4+babel7，对编译打包方面做了很多优化（成倍的提升），使用yarn作为包管理工具，并且对很多优化的最佳实践做了默认配置

经测试，将项目从vue-cli-2迁移到vue-cli-3之后，速度变化为：

编译时间：44s --> 7s
打包时间：55s --> 11s

效率提升非常明显

2、SSR

对加载性能要求较高的项目建议升级SSR

详解vue项目优化之按需加载组件-使用webpack require.ensure

使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/components/Province' import Segm
浅谈vue项目优化之页面的按需加载(vue+webpack)

通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来.结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载. 就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这
vue项目优化之通过keep-alive数据缓存的方法

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓
优化Vue项目编译文件大小的方法步骤

与其说是优化 Vue,不如说主要是在 webpack 打包的配置中做些文章,使得 Vue 编译后的文件尽可能的小.以下介绍自己在项目中进行优化的过程,其中的内容也许并不适合于每个项目,但整体思路是差不多的. 定位问题要想进行优化,首先我们得清楚问题所在.即:是哪些代码/依赖包导致最后的编译文件过大? 这里,我们需要使用 webpack-bundle-analyzer 工具.修改 package.json 文件,添加: "analyze": "NODE_ENV=product
总结4个方面优化Vue项目

运行时优化 1.使用v-if代替v-show 两者的区别是:v-if不渲染DOM,v-show会预渲染DOM 除以下情况使用v-show,其他情况尽量使用v-if 有预渲染需求需要频繁切换显示状态 2.v-for必须加上key,并避免同时使用v-if 一般我们在两种常见的情况下会倾向于这样做: 为了过滤一个列表中的项目比如 v-for="user in users" v-if="user.isActive".在这种情形下,请将 users替换为一个计算属性 (比
vue项目打包以及优化的实现步骤

目录 vue项目的打包上线及优化 vue项目的打包项目托管项目的常见优化 vue项目的打包上线及优化项目完成,我们会将项目进行上线,为了提升性能,我们往往会进行一些优化处理 vue项目的打包脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包打开终端,切换到项目根目录输入命令:npm run build 会在当前项目的根目录下生成一个dist文件夹,里面就是打包后的文件项目托管我们可以创建一个简易的node服务器来托管打包后的项目,这样就可以模
vue项目首次打开时加载速度很慢的优化过程

目录 vue首次打开时加载速度很慢优化vue项目加载过慢问题发现问题优化方案优化方法 vue首次打开时加载速度很慢 1.使用 vue-router 懒加载解决首次加载时资源过多导致的速度缓慢问题当你的 SPA(单页应用程序)变得很复杂时,打包构建后的 js 包会变得非常大,以至于严重影响页面的加载时间.vue-router 支持 webpack 内置的异步模块加载系统.所以,那些使用较少的路由组件不必打包进 bundles 里,只要在路由被访问时按需加载. 懒加载路由写法: { pat
详解vue项目首页加载速度优化

凡是做SPA的项目,特别是移动端的SAP项目,首屏加载速度必定是一个绕不过去的话题.接下来我就我们项目里的一些实践来做一下总结.希望抛砖引玉,如果各位有更好的方案,不吝赐教. 1: 针对第三方js库的优化我们项目里用到的第三方js库主要有:vue, vue-router, vuex, axio, 我们还用到了qiniu.大家知道这些依赖库的js文件都会被一起打包到vender那个js文件里面,如果这些你的第三方依赖库很多,很大的话,那就会导致vender这个文件很大,那首屏加载的速度肯定会被拖
浅谈 Vue 项目优化的方法

好久不写博文了,本文作为我使用半年 vue 框架的经验小结,随便谈谈,且本文只适用于 vue-cli 初始化的项目或依赖于 webpack 打包的项目. 前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题基础优化所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点分别对应到 .vue 文件内的,<template>,<style&
vue项目中用cdn优化的方法

在我们写项目中,优化问题是不容忽视的,尤其是首屏优化更是重中之重,这里介绍两种方法优化方法--cdn和异步加载,异步请看 http://www.jb51.net/article/110661.htm 1.cdn 首先cdn是什么,自己百度哦其作用是:当我们加载页面时,需要将我们所需要的一些依赖加载到当前会话中然后再开始执行,如果我们首屏,模块比较多是,需要等待的时间会比较长,而且.浏览器内存最多执行四十个进程,需要等到加载完前面的才能执行后面的代码,如果我们采用cdn的方式来引入一些第三方资源
Vue项目使用CDN优化首屏加载问题

前言作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验. 解决方法是,将引用的外部js.css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js.外

总结4个方面优化Vue项目

相关推荐

随机推荐