解決大文件問題，目前發現整個項目打包的出來的文件過大
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組件
圖九：
圖十：
