解決大文件問題，目前發現整個項目打包的出來的文件過大

1.如圖一、圖二可以看到在Stat Parsed Gzip下文件的大小相差很大，目前從圖三中可以看到兩個屬性productionSourceMap、ProductionGzip，productionSourceMap為true的時候會生成一些map文件(只是方便看源碼)，這樣會導致額外的文件，代碼的內容也被暴露，所以應該設置為false，減少額外文件產生，另外打包的應該開啟Gzip壓縮，目前看到ProductionGzip為false，可以設置為true，服務器也需要gzip模式

2.如圖一、圖二可以看到一些大文件，例如echarts、jquery、vux等一些大文件，例如echarts我們可以在線定制自己需要的模塊，通過這樣減少文件體積，另外一些文件如果可以從cdn引入的，也可以這么去做，如果可以按需加載的，建議都按需加載，例如vux
圖一：

圖二：

圖三：

圖四：

圖片懶加載

1.滾動到特定位置才進行圖片的加載，這樣可以減少頁面初始化的時候，一次性加載完所有的資源，導致頁面響應過慢，先將img標簽的src鏈接設為同一張圖片（比如空白圖片），然后給img標簽設置自定義屬性（比如 data-src），然后將真正的圖片地址存儲在data-src中，當JS監聽到該圖片元素進入可視窗口時，將自定義屬性中的地址存儲到src屬性中，達到懶加載的效果

緩存路由組件，路由懶加載
1.如圖五，目前項目有些組件已經進行了緩存，對于一些不經常改動或組件比較厚重的頁面，可以使用keepalive，所有路由都進行了懶加載，以后如果新增路由組件也是如此
圖五：

靜態圖片

1.例如assets里面的圖片文件，可以對圖片壓縮，還有就是如果在滿足條件的情況下，圖片大小可以小的話，建議使用小圖
2.使用css splite（雪碧圖），多張小圖標融合在一張圖上，減少http請求，通過background的position屬性實現
3.可以內嵌圖片base64

骨架屏

1.可以參考移動端框架Vant ui（https://youzan.github.io/vant/#/zh-CN/skeleton），參考配置地址（https://www.jianshu.com/p/eacac700630e），如圖六所示，骨架屏可以說是一種從視覺上去優化用戶體驗，相比于loading，骨架屏是類似于頁面完全加載時的樣式，比loading的體驗更好

圖六：

緩存數據，減少發起http請求，例如接口

1.對于如果有一些接口，例如一些配置信息等，如果更新不頻繁或者是只需要加載一次那種的，可以把接口的數據緩存下來，下次進入頁面，不再請求接口
2.前端緩存數據，例如購物車，前端可以做本地購物車，可以做些簡單的緩存，例如使用localStorage、sesstionStorage，復雜的使用indexDB

線上環境去掉console、注釋等，避免無效代碼
如圖七所示，誠選打包生產環境時，并沒有配置剔除注釋、console這些，應該類似圖八對UglifyJsPlugin進行配置，減少不必要的代碼，
圖七：

圖八：

列表優化

目前查看一些列表頁，例如圖九，使用的是vux框架的scroller組件，但是目前該組件已經棄用，并且不在維護，存在性能問題（https://doc.vux.li/zh-CN/components/scroller.html
），并且頁面在整體滾動后，導致scroller區域滾動卡頓或無法滾動的問題。
1.分類點擊響應緩慢，因為使用的是click事件，而click事件有300ms的延遲，解決的方案可以使用fastclick庫
2.滾動的問題，目前嘗試使用android和ios進行測試，發現蘋果機頁面整體可以滑動，會導致滾動卡頓的問題，android整體基本沒問題，所以建議是關閉webview上的交互，另外一個替換方案就是如vux官網所說使用第三方的滑動插件，例如better-scroller、vant的List組件
圖九：

圖十：

總結

以上是生活随笔為你收集整理的诚选app优化方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。