這次帶給大家vue專案優化方法總結，vue專案優化的注意事項有哪些，以下就是實戰案例，一起來看一下。
圖片優化
1、圖片大小優化，部分圖片使用WebP（需要考慮webp相容性）
在線生成，如智圖、又拍雲
gulp生成，gulp-webp或gulp-imageisux
使用vue-lazyload元件或其他一些元件
vue-lazyload位址：
https://www.npmjs.com/package/vue-lazyload圖片懶載入：v-lazy或使用v-lazy-container包含一個圖片組
// 引入一张图片
<img v-lazy="//domain.com/img1.jpg">
// 引入一组图片
<p v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
<img src="//domain.com/img1.jpg">
<img src="//domain.com/img2.jpg">
<img src="//domain.com/img3.jpg">
</p>元件懶載入
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元件時，同時元件是透過服務端資料渲染時，會出現多個元件先重合後分開的狀況
三種方案
當專案引入部分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專案最佳化方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
