掘金開發者大會圓滿結束，其中美團外賣上海研發中心的資深技術專家王善成對美團外賣這個龐大的產品如何在小程式的實現做了演講，本文將帶領大家回顧一下演講中所提到的技術重點。
一、技術架構
業務場景：
採用較開放的框架策略，專案支援自由進入第三方的框架去滿足各個應用場景的需求。對主流程等相對獨立性較高的採用微信的原生框架；對於營銷業務上需要支援Web頁面、小程式等多種渠道，通過引入mpvue使多個渠道可以使用Vue.js的元件。
協同開發：
多團隊開發中，核心的主流程放在主包，其他業務存放在不同的子包中，保證每個包中的業務相關性比較強，避免使用者使用中頻繁的子包載入過程，也避免團隊業務衝突。將通用元件和各業務的子包託管在npm上進行模組化的管理，對構建指令碼的改造將npm包引入到小程式。
系統架構
最底層是微信的原生元件；中層是各個業務通用的核心元件如：登入、對vebview的封裝、監控以及資料埋點等，通用元件由統一的團隊去維護和組建；通過對編譯工具進行外掛化的改造允許其他的業務方能引入第三方框架進行開發；最上層是各個業務通過拆包將業務隔離開來；
二、流程和工具
小程式腳手架（初始化）
利用如下架手架可自動初始化小程式專案，生成可以使用框架的目錄結構，方便小程式的搭建和部署。
元件架手架（初始化）
可以利用如下架手架自動化建立元件。
開發過程：
本地開發過程如下，在本地工作目錄中去呼叫命令build讓構建工具執行整個構建過程，生成的目的碼會寫到本地工作目錄中，再通過微信開發者工具對生成的程式碼進行除錯和釋出；其中構建指令碼提供Mock功能，可以模擬後端伺服器介面。
釋出過程（當前）：
將程式碼託管於Git，釋出時CI首先通過Git拉取待發布的程式碼且執行構建過程並對原始碼和圖片進行壓縮排一步縮小小程式的體積，同時還對程式碼進行語法檢查，對於不通過的程式碼將會被打回重新修改才可再次釋出。
釋出過程（規劃）：
將整個過程通過CI連線起來，減少人工操作。
三、元件化
Storage效能：
對小程式原生元件的改造，以下是一份“暴力”測試資料。
- 大小約100k隨機物件讀寫清空快取各100次，耗時比較
Storage資料同步：
原理是在初始化過程當中，記憶體先去呼叫 wx.getStorageInfo獲取現在小程式getStorage裡面所有的儲存的key值，就可以得到一個資料表。在讀的過程中，首先是 元件的api去觸發讀取的操作，然後記憶體會查詢我當前有沒有快取這個資料，沒有的話就通過wx.getStorageInfo獲取，並將值返回回去。寫入只需要寫入到記憶體當中，這樣寫入的效能就非常高。關於同步機制，美團外賣小程式採取了兩個同步機制進行雙重保障，首先是在小程式的生命週期中呼叫onHide、把記憶體中沒有同步到檔案的資料通過setlnterval回寫到檔案中。為確保資料同步設定了定時器。
