圖片優(yōu)化

成都創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為西平企業(yè)提供專業(yè)的網(wǎng)站建設、網(wǎng)站設計，西平網(wǎng)站改版等技術服務。擁有十年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

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

2、減少圖片請求，使用雪碧圖

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

頁面性能優(yōu)化

圖片或組件懶加載

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

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

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

// 引入一張圖片 
 
// 引入一組圖片

 
 
  

組件懶加載

Vue.use(VueLazyload, {
 lazyComponent: true
});

 

圖片預加載

快速顯示圖片

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

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

js文件一般是同步加載的，放在頁面內會阻塞主要js文件加載。

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

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

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

三種方案

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

減少引入外部文件大小

項目引入部分ElementUI內容時，通過引入babel-plugin-component配置.babelrc文件，這樣即可引入部分組件，從而減少組件的大小。

路由懶加載

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

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

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。