淺談vue項(xiàng)目可以從哪些方面進(jìn)行優(yōu)化

更新時(shí)間：2018年05月05日 10:37:07 作者：EternallyMaybe

本篇文章主要介紹了淺談vue項(xiàng)目可以從哪些方面進(jìn)行優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

圖片優(yōu)化

1、圖片大小優(yōu)化，部分圖片使用WebP（需要考慮webp兼容性）

在線生成，如智圖、又拍云
gulp生成，gulp-webp或gulp-imageisux
canvas生成

2、減少圖片請(qǐng)求，使用雪碧圖

在線生成：sprites Generator、騰訊的gopng、spriteme
代碼生成：gulp.spritesmith或者sass的compass

頁(yè)面性能優(yōu)化

圖片或組件懶加載

使用vue-lazyload組件或其他一些組件

vue-lazyload地址： https://www.npmjs.com/package/vue-lazyload

圖片懶加載：v-lazy或使用v-lazy-container包含一個(gè)圖片組

// 引入一張圖片 
<img v-lazy="http://domain.com/img1.jpg"> 
// 引入一組圖片
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
 <img data-src="http://domain.com/img1.jpg">
 <img data-src="http://domain.com/img2.jpg">
 <img data-src="http://domain.com/img3.jpg"> 
</div>

組件懶加載

Vue.use(VueLazyload, {
 lazyComponent: true
});
<lazy-component>
 <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>

圖片預(yù)加載

快速顯示圖片

使用場(chǎng)景：在某個(gè)查看圖片的組件，當(dāng)不斷翻看下一頁(yè)的圖片時(shí)，從服務(wù)端獲取數(shù)據(jù)再展示圖片會(huì)出現(xiàn)圖片緩慢加載的情況，此時(shí)可以在展示新數(shù)據(jù)時(shí)候先預(yù)加載圖片，圖片加載完之后在，將圖片填充到對(duì)應(yīng)位置

三方插件懶加載（按需加載）

js文件一般是同步加載的，放在頁(yè)面內(nèi)會(huì)阻塞主要js文件加載。

使用場(chǎng)景：有的項(xiàng)目必須引入jquery等文件時(shí)，在組件內(nèi)部引入這些文件一定程度會(huì)阻塞頁(yè)面渲染，因而通過(guò)特定事件（點(diǎn)擊或者彈窗）動(dòng)態(tài)加載jquery等JS文件，可以使主頁(yè)面快速顯示出來(lái)。

異步加載頁(yè)面，如何讓組件之間不重合

加載多個(gè)vue組件時(shí)，同時(shí)組件是通過(guò)服務(wù)端數(shù)據(jù)渲染時(shí)，會(huì)出現(xiàn)多個(gè)組件先重合后分離的狀況

三種方案

當(dāng)頁(yè)面展示的版塊是固定的時(shí)候且內(nèi)容高度不易變動(dòng)時(shí)候，可以預(yù)先在組件外設(shè)置一個(gè)固定高度，顯示的時(shí)候就像在一個(gè)框架里添加內(nèi)容。當(dāng)頁(yè)面內(nèi)容不固定時(shí)候，為了減少異步加載時(shí)組件重合的問(wèn)題，可以在首屏在某組件數(shù)據(jù)加載完成時(shí)候設(shè)置其他組件顯示，通過(guò)v-show顯示。
當(dāng)頁(yè)面整體固定時(shí)，可以為頁(yè)面增加一個(gè)骨架，這樣防止頁(yè)面閃爍的情況。具體實(shí)施可以參照 http://www.dbjr.com.cn/article/130505.htm
服務(wù)端渲染頁(yè)面,對(duì)于一些頁(yè)面數(shù)據(jù)固定、更改較少的，可以考慮通過(guò)服務(wù)端渲染，會(huì)在短時(shí)間將頁(yè)面顯示出來(lái)，有比較好的用戶(hù)體驗(yàn)。

減少引入外部文件大小

項(xiàng)目引入部分ElementUI內(nèi)容時(shí)，通過(guò)引入babel-plugin-component配置.babelrc文件，這樣即可引入部分組件，從而減少組件的大小。

路由懶加載

但使用到vue-router時(shí)，webpack會(huì)將所有組件打包在一個(gè)js文件中，這樣就導(dǎo)致這個(gè)文件非常大，從而會(huì)影響首頁(yè)的加載，最好的方法就是將其他路由分別打包到不同js文件中，切換路由時(shí)再加載對(duì)應(yīng)js文件。

resolve => require([URL], resolve), 支持性好

() => system.import(URL) , webpack2官網(wǎng)上已經(jīng)聲明將逐漸廢除, 不推薦使用

() => import(URL), webpack2官網(wǎng)推薦使用, 屬于es7范疇, 需要配合babel的syntax-dynamic-import插件使用

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: