vue項目能夠從哪些方面進行優化

圖片優化

1. 圖片大小優化，部分圖片使用WebP（須要考慮webp兼容性）

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

   能夠參考juejin.im/post/5ad043…

2. 減小圖片請求，使用雪碧圖

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

頁面性能優化

圖片或組件懶加載

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

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

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

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

2. 組件懶加載

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

圖片預加載

快速顯示圖片

使用場景：在某個查看圖片的組件，當不斷翻看下一頁的圖片時，從服務端獲取數據再展現圖片會出現圖片緩慢加載的狀況，此時能夠在展現新數據時候先預加載圖片，圖片加載完以後在，將圖片填充到對應位置

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

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

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

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

加載多個vue組件時，同時組件是經過服務端數據渲染時，會出現多個組件先重合後分離的情況

三種方案

1. 當頁面展現的版塊是固定的時候且內容高度不易變更時候，能夠預先在組件外設置一個固定高度，顯示的時候就像在一個框架裏添加內容。當頁面內容不固定時候，爲了減小異步加載時組件重合的問題，能夠在首屏在某組件數據加載完成時候設置其餘組件顯示，經過v-show顯示。

2. 當頁面總體固定時，能夠爲頁面增長一個骨架，這樣防止頁面閃爍的狀況

   具體實施能夠參照segmentfault.com/a/119000001…

3. 服務端渲染頁面,對於一些頁面數據固定、更改較少的，能夠考慮經過服務端渲染，會在短期將頁面顯示出來，有比較好的用戶體驗。

減小引入外部文件大小

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

路由懶加載

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

resolve => require([URL], resolve), 支持性好
() => system.import(URL) , webpack2官網上已經聲明將逐漸廢除, 不推薦使用
() => import(URL), webpack2官網推薦使用, 屬於es7範疇, 須要配合babel的syntax-dynamic-import插件使用
複製代碼

路由頁面緩存

使用vue-router的keep-alive 緩存頁面，下次打開頁面時候不須要從新加載，顯示更快

請求優化

1. 服務器對圖片緩存
2. 設置請求緩存，設置cache-control
3. 開啓Gzip,壓縮響應信息，使傳輸快
4. 設置DNS緩存
5. 使用HTTP2.0