1，圖片尺寸優化，部分圖片使用webp(需要考慮WebP兼容性)。
線上生成，比如智慧圖，雲拍。
Gulp生成，gulp-webp或gulp-imageisux。
畫布生成
2、降低畫面要求，使用sprite。
線上生成:sprites生成器，騰訊的gopng，spriteme。
代碼生成:gulp.spritesmith或sass的指南針。
頁面性能優化
圖片或組件懶得加載。
使用vue-lazyload組件或其他壹些組件。
Vue-lazyload地址:/包/vue-lazyload
圖片惰性加載:v-lazy或者使用v-lazy-container來包含壹個圖片組。
//介紹壹張圖
& ltimg v-lazy = "//domain . com/img 1 . jpg " & gt；
//介紹壹組圖片
& ltdiv v-lazy-container = " { selector:' img '，錯誤:' xxx.jpg '，正在加載:' xxx.jpg ' } " & gt
& ltimg data-src = "//domain . com/img 1 . jpg " & gt；
& ltimg data-src = "//domain . com/img 2 . jpg " & gt；
& ltimg data-src = "//domain . com/img 3 . jpg " & gt；
& lt/div & gt；
組件延遲加載
Vue.use(VueLazyload，{
懶人組件:真的
});
& lt懶惰組件& gt
& ltimg class = " mini-cover ":src = " img . src " width = " 100% " height = " 400 " >
& lt/lazy-component & gt；
圖像預加載
快速顯示圖片
使用場景:在壹個用於查看圖片的組件中，不斷查看下壹頁的圖片時，從服務器獲取數據後，圖片會加載緩慢。這時候可以在顯示新數據的時候預加載圖片，加載後圖片會被填充到相應的位置。
三方插件懶加載(按需加載)
Js文件壹般是同步加載的，放在頁面裏會阻塞主js文件的加載。
使用場景:當壹些項目必須導入jquery等文件時，將這些文件導入組件會在壹定程度上阻塞頁面渲染，所以通過特定事件(點擊或彈出)動態加載jquery等JS文件可以使主頁面快速顯示。
異步加載頁面時如何讓組件不重疊？
當加載多個vue組件，通過服務器數據渲染組件時，會出現多個組件先重疊後分離的情況。
三個方案
當頁面上顯示的節是固定的，內容高度不容易改變時，可以事先在組件外設置壹個固定的高度，顯示就像在框架中添加內容壹樣。當頁面內容不固定時，為了減少異步加載時組件重疊的問題，可以在加載壹個組件的數據時，在首屏顯示其他組件，通過v-show顯示。
當整個頁面固定後，可以給頁面添加壹個骨架，防止頁面閃爍。具體實施請參考//www . gxlcms . com/article/130505 . htm。
服務器呈現頁面。對於壹些數據固定，變化不大的頁面，可以考慮通過服務器渲染，這樣會在短時間內顯示頁面，用戶體驗更好。
減小導入的外部文件的大小
當項目引入壹些ElementUI內容時，可以通過引入babel-plugin-component配置來引入壹些組件。babelrc文件，從而減少組件的大小。
路由延遲加載
但是在使用vue-router時，webpack會將所有組件打包在壹個js文件中，這樣會導致文件非常大，影響首頁的加載。最好的方法是將其他路由打包成不同的js文件，然後在切換路由時加載相應的js文件。
resolve = & gt要求([URL]，解析)，有好的支持。
()= & gtSystem.import(URL)，webpack2已經在官網聲明逐步廢止，不推薦使用。
()= & gt官網為Web Pack 2推薦的導入(URL)，屬於es7的範疇，需要配合babel的語法-動態-導入插件使用。