vue專案全面優化攻略

這次帶給大家vue專案全面優化攻略，vue專案全面優化的注意事項有哪些，以下就是實戰案例，一起來看一下。

圖片優化

1、圖片大小優化，部分圖片使用WebP（需要考慮webp相容性）

1. #線上生成，如智圖、又拍雲

2. gulp生成，gulp-webp或gulp-imageisux

3. canvas生成

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

1. 線上產生：sprites Generator、騰訊的gopng、spriteme

2. 程式碼產生：gulp.spritesmith或sass的compass

#效能最佳化

圖片或元件懶載入

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

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

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

// 引入一张图片 
<img  src="/static/imghwm/default1.png" data-src="//domain.com/img1.jpg" class="lazy" alt="vue專案全面優化攻略" > 
// 引入一组图片
<p>
 <img  src="/static/imghwm/default1.png" data-src="//domain.com/img1.jpg" class="lazy" alt="vue專案全面優化攻略" >
 <img  src="/static/imghwm/default1.png" data-src="//domain.com/img2.jpg" class="lazy" alt="vue專案全面優化攻略" >
 <img  src="/static/imghwm/default1.png" data-src="//domain.com/img3.jpg" class="lazy" alt="vue專案全面優化攻略" > 
</p>

元件懶載入

Vue.use(VueLazyload, {
 lazyComponent: true
});
<lazy-component>
 <img  class="mini-cover lazy" src="/static/imghwm/default1.png" data-src="img.src" alt="vue專案全面優化攻略" >
</lazy-component>

圖片預先載入

快速顯示圖片

使用場景：在某個查看圖片的元件，當不斷翻看下一頁的圖片時，從服務端取得資料再展示圖片會出現圖片緩慢載入的情況，此時可以在展示新資料時候先預先載入圖片，圖片載入完之後在，將圖片填入對應位置

三方外掛程式懶載入（按需載入）

js檔案一般是同步載入的，放在頁面內會阻塞主要js檔案載入。

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

非同步載入頁面，如何讓元件之間不重合

載入多個vue元件時，同時元件是透過服務端資料渲染時，會出現多個元件先重合後分開的狀況

三種方案

• 當頁面展示的版塊是固定的時候且內容高度不易變動時候，可以預先在元件外設置一個固定高度，顯示的時候就像在一個框架裡加入內容。當頁面內容不固定時候，為了減少非同步載入時元件重合的問題，可以在首屏在某組件資料載入完成時候設定其他元件顯示，透過v-show顯示。

• 當頁面整體固定時，可以為頁面增加一個骨架，這樣防止頁面閃爍的情況。具體實作可以參考http://www.jb51.net/article/130505.htm

• 服務端渲染頁面,對於一些頁面資料固定、變更較少的，可以考慮透過服務端渲染，會在短時間將頁面顯示出來，有比較好的使用者體驗。

減少引入外部文件大小

當專案引入部分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插件使用

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用vue註冊元件

什麼使用Vue三層巢狀路由

以上是vue專案全面優化攻略的詳細內容。更多資訊請關注PHP中文網其他相關文章！