PPT 和 視訊
下面是 T 沙龍小編對分享的一些總結：
第一位分享嘉賓是來自享物說的 Rolland Safort（中文名：塞福），目前負責享物說小程式開發工作，有多年前端工作經驗，對前端開發有深入的理解。他為大家帶來了享物說團隊小程式開發過程中積累的一些架構與效能優化方案。
一、小程式簡介
因為在場的同學有很大一部分是 iOS 和 Android 開發，對 Web 端和小程式開發並不是十分了解，所以塞福首先對小程式的基本組成和實現原理進行了簡單的介紹。
微信小程式執行在三端：iOS、Android 和用於除錯的開發者工具中。本質上都是通過各個平臺的 WebView 和 JS 解析器來進行渲染和解釋執行。
JavaScript：微信小程式的 JavaScript 執行在微信 App 的上下文中，不能直接操作 DOM，也不能通過 Node.js 相關介面訪問作業系統 API。在 iOS 上，小程式的 JavaScript 程式碼是執行在 JavaScriptCore 中；在 Android 上，小程式的 JavaScript 程式碼是通過 X5 核心來解析的；在開發工具上，小程式的 JavaScript 程式碼是執行在 NW.js （基於 Chromium 和 Node.js 執行，以前也叫 nodeWebkit）上的。 WXML：微信小程式的展示層，是微信自己定義的基於 XML 語法的描述語言。 WXSS：用來修飾 WXML 展示層的樣式，類似 CSS 和 HTML 的關係。WXSS（WeiXin Style Sheets）是一套樣式語言，用於描述 WXML 的元件樣式。WXSS 用來決定 WXML 的元件應該怎麼顯示。WXSS 具有 CSS 大部分特性，對 CSS 進行了擴充以及修改。
小程式的開發當中也有一些注意點需要關注：
- 小程式發起的都是 HTTPS 網路請求，在開發除錯的過程中可以不校驗協議和 TLS 版本，但在實際上線後必須進行 HTTPS 通訊；
- 微信小程式名稱在帳號資訊設定時完成，名稱可以由中文、數字、英文，長度在 3-20 個字元之間，一箇中文字等於 2 個字元，一旦設定完成後需要修改的話，300 RMB 可修改一次（別問我是怎麼知道的），且有次數限制；
- 小程式開發完成後打包有大小限制，最大每個包 2M，最多 4 個包，一些佔包體積較大的資源需要儘量壓縮。
大家可以大概想象一下小程式的執行過程：
- 使用者在微信中點選、開啟某一個小程式；
- 微信 App 從伺服器下載這個小程式包；
- 微信內建的執行環境分析小程式包得到應用程式的配置資訊載入並執行 app.js；
- 根據使用者操作進一步響應各種使用者行為。
二、享物說小程式
享物說小程式是一個比較大型的小程式，因為享物說整個平臺都是小程式起家的，所以小程式承載了享物說平臺的幾乎全部功能，iOS 和 Android 的原生 App 雖然已經發布了一些版本，但還在完善和豐富功能的過程中。
1. 發展歷史、架構
享物說小程式目前主要經歷過一次大規模的重構，之前的舊版本使用了微信官方的小程式開發框架，而新版採用美團的 mpvue 進行重構，在效能和體驗上有了進一步的提升。
使用 mpvue 主要有以下一些優勢：
- 徹底的元件化開發能力，提高程式碼複用性；
- Vuex 資料管理方案，方便構建複雜應用；
- 快捷的 webpack 構建機制，自定義構建策略、開發階段 hotReload，提升開發效率；
- 支援使用 npm 外部依賴；
- 支援 H5 程式碼轉換編譯成小程式程式碼。
享物說小程式從 2017 年9 月上線，至今已有超過 2000 萬使用者使用，上圖展示了享物說使用者量變化的一個大致趨勢。
2. 埋點、測試、監控
小程式相比原生 App，最顯著的一個特徵就是可以快速迭代，雖然它的主包發版也需要一定的稽核時間，但是相比原生 App，小程式可以通過將大部分資源和配置部署到伺服器上來實現變相的熱修改 / 熱更新，這為產品的灰度釋出、BUG 修正、功能開發帶來了極大的便利。
正因為小程式的靈活性給業務帶來的便利性，需要去對它的埋點和檢測進行一個比較好的維護，不僅限於小程式的頁面訪問、使用者操作、事件觸發等，還要儘可能追蹤每一個分享出去的 URL 的傳播軌跡和訪問流量，根據所得資料來進行分析從而為接下來的業務方向指路。
三、效能與體驗優化
享物說小程式上線至今未滿一年，成長速度可以用誇張來形容，但令享物說團隊欣喜之餘，帶給他們的還有嚴峻的業務壓力和流量高峰挑戰。
以下這些是享物說團隊的部分小程式優化經驗和建議：
- 少⽤ setData，如果需要渲染可以使⽤用 this.data.key = value；
- 儘量使用 CDN，圖片都用懶載入；
- 使⽤用分包載入；
- 優化程式碼，清理沒有使⽤到的程式碼和資源 ，減小包體積；
- 開發環境新增 ESlint 程式碼校驗；
- 分享圖片及其他經常變的靜態資源，不能寫死在前端，通過介面動態獲取，減少重新發版的可能性。
四、高可⽤的⼩程式
面對一個使用者量如此大的平臺，傳統的解決方案可能都會有些捉襟見肘，享物說小程式都做了哪些來獲得相對穩定的線上執行狀態呢？
1. 超時設定
- 網路請求，預設超時時間和最大超時時間都 60s；
request、uploadFile、downloadFile的最大併發限制是 10 個 超出最大併發數的請求，會等待前面的請求完成或者超時。
2. 服務降級
根據後端負載和可⽤狀況，結合之前所說的服務分級，把後端 的服務等級做響應的調整。如果服務端負載過重，那麼可以有 針對地拒絕服務或者關閉服務。高峰期間，對⾮核心業務，超出服務端負 荷的情況下，可以考慮暫時關閉服務。
在極端情況下，可以考慮僅在 CDN 提供只讀的靜態內容。
3. 服務監控
微信官⽅給⼩程式提供了運維中⼼，在這⾥可以看到小 程式的近乎實時的運⾏⽇志。如有必要，可以埋點收集 在異常發⽣時候的⽤戶操作路徑，幫助事後復現問題。
4. Webviews
活動和部分⾮核心業務使⽤ H5 實現，並且通過 WebView 在⼩程式內展示。
五. 總結
享物說小程式上線近一年過程中最大的問題就是流量壓力導致的效能和穩定性問題，享物說團隊的同學通過如下一些手段對該問題進行了解決：
- 使用 mpvue 對整個小程式進行重構；
- 新增完善的埋點並結合微信提供的運維中心對整個線上執行狀況進行完整的監控和管理；
- 核心業務整理 / 優化，非核心業務 H5 化，必要時非核心業務降級，保證主業務可用性；
- 資源與配置動態話，實現無需發版的線上熱修改 / 熱更新。