總結(jié)4個(gè)方面優(yōu)化Vue項(xiàng)目

運(yùn)行時(shí)優(yōu)化

創(chuàng)新互聯(lián)建站專注于企業(yè)成都營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、隨縣網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為隨縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

兩者的區(qū)別是：v-if不渲染DOM，v-show會(huì)預(yù)渲染DOM

除以下情況使用v-show，其他情況盡量使用v-if

有預(yù)渲染需求

需要頻繁切換顯示狀態(tài)

2、v-for必須加上key，并避免同時(shí)使用v-if

一般我們?cè)趦煞N常見的情況下會(huì)傾向于這樣做:

為了過(guò)濾一個(gè)列表中的項(xiàng)目
比如 v-for="user in users" v-if="user.isActive"。在這種情形下，請(qǐng)將 users替換為一個(gè)計(jì)算屬性 (比如 activeUsers)，讓其返回過(guò)濾后的列表

為了避免渲染本應(yīng)該被隱藏的列表
比如 v-for="user in users" v-if="shouldShowUsers"。這種情形下，請(qǐng)將 v-if 移動(dòng)至容器元素上 (比如 ul, ol)

3、事件及時(shí)銷毀

Vue組件銷毀時(shí)，會(huì)自動(dòng)清理它與其它實(shí)例的連接，解綁它的全部指令及事件監(jiān)聽器，但是僅限于組件本身的事件。

也就是說(shuō)，在js內(nèi)使用addEventListener等方式是不會(huì)自動(dòng)銷毀的，我們需要在組件銷毀時(shí)手動(dòng)移除這些事件的監(jiān)聽，以免造成內(nèi)存泄露，如：

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

首屏優(yōu)化

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、資源提前請(qǐng)求

經(jīng)測(cè)試，Vue項(xiàng)目中各文件的加載順序?yàn)椋簉outer.js、main.js、App.vue、[-page-].vue、[component].vue，如圖：

總結(jié)4個(gè)方面優(yōu)化Vue項(xiàng)目

其中，router的加載時(shí)間相比于page.vue快近100ms，如果page.vue的文件較多，時(shí)間差異會(huì)更大

所以，可以在頁(yè)面掛載、渲染的同時(shí)去請(qǐng)求接口數(shù)據(jù)，如在router.js中請(qǐng)求數(shù)據(jù)：

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

store.dispatch('initAjax')

3、異步路由

使用異步路由可以根據(jù)URL自動(dòng)加載所需頁(yè)面的資源，并且不會(huì)造成頁(yè)面阻塞，較適用于移動(dòng)端頁(yè)面

建議主頁(yè)面直接import，非主頁(yè)面使用異步路由

使用方式：

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

4、異步組件

不需要首屏加載的組件都使用異步組件的方式來(lái)加載（如多tab），包括需要觸發(fā)條件的動(dòng)作也使用異步組件（如彈窗）
使用方式為：v-if來(lái)控制顯示時(shí)機(jī)，引入組件的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、使用輕量級(jí)插件、異步插件

使用webpack-bundle-analyzer查看項(xiàng)目所有包的體積大小，較大的插件包盡量尋找輕量級(jí)的替代方案

首屏用不到的插件、或只在特定場(chǎng)景才會(huì)用到的插件使用異步加載（如定位插件，部分情況可以通過(guò)URL傳遞經(jīng)緯度；或生成畫報(bào)插件，需要在點(diǎn)擊時(shí)觸發(fā)）；插件第一次加載后緩存在本地，使用方式為：

// 以定位插件為例
const latitude = getUrlParam('latitude')
const longitude = getUrlParam('longitude')
// 如果沒(méi)有經(jīng)緯度參數(shù)，則使用定位插件來(lái)獲取經(jīng)緯度
if (!latitude || !longitude) {
 // 首次加載定位插件
 // webpack4寫法，若使用webpack3及以下，則await import('locationPlugin')即可
 if (!this.WhereAmI) this.WhereAmI = (await import('locationPlugin')).default
 // do sth...
}

6、公用cdn

使用公用的CDN資源，可以起到緩存作用，并減少打包體積

網(wǎng)絡(luò)優(yōu)化

1、減少網(wǎng)絡(luò)請(qǐng)求

瀏覽器對(duì)同一時(shí)間針對(duì)同一域名下的請(qǐng)求有一定數(shù)量限制（一般是6個(gè)），超過(guò)限制數(shù)目的請(qǐng)求會(huì)被阻塞
首屏盡可能減少同域名的請(qǐng)求，包括接口和js；按需減少首屏的chunk.js，合并接口請(qǐng)求

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

preload具有較高的加載優(yōu)先級(jí)，它可以利用間隙時(shí)間預(yù)加載資源，將加載和執(zhí)行分離開，不阻塞渲染和document的onload事件
每次與域名連接都需要進(jìn)行DNS解析，使用dns-prefetch可以預(yù)解析域名的DNS
prefetch會(huì)預(yù)加載頁(yè)面將來(lái)可能用到的一些資源，優(yōu)先級(jí)較低；對(duì)首屏渲染要求較高的項(xiàng)目不建議使用

三者的使用方式，在head標(biāo)簽中添加（vue-cli-3已經(jīng)做了相應(yīng)配置）：

<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"  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）等，降低頁(yè)面白屏?xí)r間
這樣即使在弱網(wǎng)甚至斷網(wǎng)情況下，也能迅速展示出頁(yè)面

編譯打包優(yōu)化

1、升級(jí)Vue-Cli-3

vue-cli-3采用webpack4+babel7，對(duì)編譯打包方面做了很多優(yōu)化（成倍的提升），使用yarn作為包管理工具，并且對(duì)很多優(yōu)化的最佳實(shí)踐做了默認(rèn)配置

經(jīng)測(cè)試，將項(xiàng)目從vue-cli-2遷移到vue-cli-3之后，速度變化為：

編譯時(shí)間：44s --> 7s
打包時(shí)間：55s --> 11s

效率提升非常明顯

2、SSR

對(duì)加載性能要求較高的項(xiàng)目建議升級(jí)SSR

網(wǎng)站標(biāo)題：總結(jié)4個(gè)方面優(yōu)化Vue項(xiàng)目
轉(zhuǎn)載源于：http://aaarwkj.com/article2/igcgic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、動(dòng)態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、ChatGPT、全網(wǎng)營(yíng)銷推廣、營(yíng)銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

總結(jié)4個(gè)方面優(yōu)化Vue項(xiàng)目