https://billi0ns-vue-shop.netlify.app
前端使用 Vue 與 BootstrapVue 來開發,資料庫以及使用者驗證使用 Firebase。
- 前台功能: 瀏覽商品以及篩選商品類別、加入購物車及結帳、查詢歷史訂單等
- 後台功能: 管理上架商品內容以及商品擺放順序,查看訂單紀錄等
在完成了網站的大致功能後,就把網站丟到 PageSpeed 測試速度。
而測試結果中第一個建議是移除未使用 JavaScript,因此使用 Webpack Bundle Analyzer 來檢視一下是哪一個套件最佔空間。
檢視後發現其中最大的是 BootstrapVue,gzipped 後依然有 206KB。其次為 Firebase,gzipped 後有 154.8KB。
研究後發現 BootstrapBue JavaScript 的部分支持 tree-shaking,因此就逐一手動引入需要的組件,也成功讓檔案大小降到了 45.8KB。
Firebase 的部分在了解後發現並不支持 tree-shaking。GitHub 上也有人開 issue 表示 bundle 太大了,而官方意識到這件事情也著手進行優化。
最新消息是優化後的 Firebase 已經在 alpha release 前的最終階段了,因此未來有機會能使用瘦身後的 Firebase 了。
在優化後整體 bundle size 來到了 272.52KB,依然比建議的 244KB 來的高。不過主要是 Firebase 太大了,但目前又無法降低它的大小。 而偏肥的 bundle size 也導致 First Contentful Paint 比較久,尤其在行動裝置上通常大於 5 秒,電腦裝置則約 1.2 秒。 為了避免長時間白畫面造成使用體驗不佳,我也在 vue render 前加入了一段載入動畫,讓等待的體驗好一些。
帳號:[email protected]
密碼:visitorpw456
P.S. 訪客帳號只有進入後台讀取資料庫的權限,無法寫入資料庫喔!
- VueJs - 網頁框架
- Vue CLI - 快速配置開發環境、build code、檢視 webpack bundle 大小
- Vue Router - 管理頁面並控管進入後台的路徑
- Vuex - 同時利用 localStorage 來儲存購物車資訊
- BootstrapVue
- ESLint - 使用 Airbnb Style Guide,全部都符合沒有任何 error。而用 console.log 除錯的地方在 production mode 時也用 babel-plugin 移除跟 console 有關的訊息了。
- Firebase - 資料庫
- Firestore - 對資料庫進行 CRUD 操作來管理產品資料及訂單資料,
- Firebase Auth - 當 Navigation Guard 管理進入後台的權限
- Firebase Storage - 存放產品的圖片
安裝所需的套件
npm install
啟動 local server
npm run serve
建立 production build
npm run build