Giter Club home page Giter Club logo

vue-shop's Introduction

Mary's Bakery 電商平台 (Vue)

目錄

Demo

https://billi0ns-vue-shop.netlify.app

專案說明

前端使用 Vue 與 BootstrapVue 來開發,資料庫以及使用者驗證使用 Firebase。

  • 前台功能: 瀏覽商品以及篩選商品類別、加入購物車及結帳、查詢歷史訂單等
  • 後台功能: 管理上架商品內容以及商品擺放順序,查看訂單紀錄等

網站功能

加入購物車

Imgur

選擇商品分類

Imgur

完成訂單並結帳

Imgur

查詢訂單紀錄

Imgur

上架新產品

Imgur

後續優化

在完成了網站的大致功能後,就把網站丟到 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 前加入了一段載入動畫,讓等待的體驗好一些。

最終 bundle report bundle size

訪客測試用帳號

帳號:[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 - 資料庫

本地測試

安裝所需的套件

npm install

啟動 local server

npm run serve

建立 production build

npm run build

vue-shop's People

Watchers

Angus avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.