vue+webpack在“雙十一”導購產品的技術實踐

雙十一中，無線前端的產品可以說非常的豐富。在雙十一中，互動始終是重頭的一部分，但是與以往不一樣的地方是，導購產品在本次雙十一中有著不俗的 表現。而今年的雙11導購業務占據了5大模塊里的后三個，除了必搶，其它業務均是由手淘的同學來完成的，筆者作為導購產品的一員，選擇導購產品來給大家解 讀其中的技術實踐。

本次雙十一的導購產品都有哪些？

看到這些截圖，相信很多人都很熟悉，不管是雙十一晚會搖一搖搖出的“清單”，還是大家搶完紅包迫不及待點開的“我的雙十一”，又或者是點開“我的雙十一”標簽進入的人群會場尋找與自身匹配的商品，這些都是本次雙十一的導購產品。

這么多的導購產品，本次雙十一導購產品的技術體系又是什么樣的，在雙十一中，無線導購產品使用了什么技術？這一定是大伙關心的問題，下面將展開介紹雙十一無線導購產品的技術實踐。

技術選型的思考

對于雙十一的場景，我們希望能夠選擇一個足夠適應大型應用的的技術方案，能夠支撐起雙十一這樣的大場景，整體思考上有：

• 適合大型應用的MVVM的框架，去掉復雜的DOM操作，讓代碼變得易于review和維護
• 模塊化產品，方便隨時增減一個模塊
• 方便與團隊現有的庫，工具進行整合

基本技術方案——vue+webpack

• vue.js ——輕量級的MVVM框架
• webpack ——前端模塊化解決方案

有同學會問，前端社區可選用的工具和框架這么多，為什么挑選了vue+webpack在雙十一的項目中進行實踐，那么我們來盤點下選用上的思考：

• vuejs——輕量、學習成本低、雙向綁定、無dom的操作、組件的形式編寫

  vuejs是個輕量級的mvvm框架， 集合了angular的基本功能，卻又比angular更為精簡，功能上涵蓋了雙向綁定、指令、邏輯控制、過濾器、事件監聽、函數等。框架的特點使得項目 在狀態變更、分頁的場景下可以擁有很大的便利——所有的操作只需要變更數組，沒有任何的dom操作。

• webpack——CommonJS的引用和編寫方式、loader非常的豐富，包括vue-loader、css-loader、less-loader

  webpack是前端組件化的解決方案，webpack提供了核心的CommonJS引用方案去引用資源，如下：

//app.js
module.exports = {
  title: 'xxxx'
}
//entry.js
var app = require('./app.js');
console.log(app.title);

但是，webpack與以往的CommonJS引用思路不太一樣，webpack允許任何的靜態資源作為模塊進行引用，包括css、less、 html...等等，那么我們需要做的僅僅是加載必要的loader（加載器），如css-loader、less-loader、style- loader等等，那么webpack與vue結合起來，我們可以通過vue-loader，這樣我們編寫的方式就變成如下:

<style>
  /*樣式編寫*/
  #compot{
    width: 100px;
  }
</style>
<template>
  <!--模板-->
  <div id="compt"></div>
</template>
<script>
  //模塊編寫
  module.exports = {
  }
</script>

最后保存為*.vue文件，入口文件的初始化只需要:

var opts = require('*.vue');//引用*.vue文件
var main = new Vue(opts);//實例化
main.$mount('#app');//渲染

這么一來，使用vue＋webpack，我們實現了：

更多的實踐demo筆者在這里就不展開了，有興趣的小伙伴可以閱讀下無線前端@勾股 的一篇博文—— just-vue

工具鏈路在實際開發上的整合

當然，僅僅使用vue+webpack，已經可以以一種高效的方式進行開發了，但是為了和無線團隊的“私貨”結合起來，我們的開發鏈路還更完善些，不過是不是有“私貨”就不能使用了，不是的，事實上，“私貨”相對獨立，開發時也可以完全剝離出來，開發過程可以自行選擇。

本次導購產品中，使用vue＋webpack的過程中，將其結合到了gulp中，同時引用gulp-htmlone、autoprefixer-core，主要解決以下幾個問題：

• 1、讀取webpack配置，運行webpack的loader
• 2、自動補全css3的前綴
• 3、打包、下載、壓縮js代碼，最后將所有文件打包成一個*.html文件

圖片處理？

上述的介紹中，似乎涵蓋了html、css、js，但是始終沒有提到圖片上面的處理，作為前端頁面重要的一環，圖片怎么可能在無線前端中被忽略，筆者下面展開介紹圖片處理上，我們團隊的做法

首先，先說說痛點，下圖是不是大多數情況下圖片的工作流程

那么，在面對雙十一那么大的頁面量時，如果以這樣的方式去工作，那一定會崩潰的...因此在雙十一前，團隊已經整理出了一套完整的圖片工作方案，因此在雙十一才能以一個全新的面貌展現給大家，下面筆者給大家進行介紹：

• 1、切圖、測量（開發階段）

  切圖和測量的過程，選用的工具依舊是ps或者sketch，借助ps cc2014版的切圖插件Cutterman和標注工具Parker進行工作；而sketch就不需要提了，本身自帶的強大標注和導出功能已經讓工作非常便利了

  

• 2、上傳和替換地址（打包階段）

  以往的圖片上傳和替換地址的工作都為人工所為，如今無線提供一套圖片工具解決方案，通過監聽圖片目錄里圖片文件的更換來執行上傳命令，同時還支持將小圖片轉成base64，最后在替換地址上，根據不同的屏幕分辨率選擇不同的圖片尺寸，總結下來這套工具做了下面幾件事：

  • 監聽圖片文件，執行上傳圖片
  • 小圖轉換base64
  • 替換掉代碼中的相對路徑，包括img[src]、background、element.style.background
  • css代碼中添加根據屏幕分辨率選擇圖片的邏輯

  

• 3、圖片自動優化（代碼運行階段）

  在這一層面做的圖片優化，是在代碼執行過程，也就是頁面渲染過程。這個過程基于無線前端的組件lib.img，可以實現根據尺寸、弱網判斷、屏幕分辨率進行圖片的處理，同時提供懶加載的功能，歸納起來有：

  • 根據尺寸選擇圖片
  • 弱網判斷進行選擇
  • 設備分辨率進行選擇
  • 根據圖片質量要求進行選擇

  

• 匯總起來

前期腳手架搭好后，最后我們的圖片工作流程可能就只需要做下面幾個工作，也就是上述"開發階段"需要做的事情：

• 1、切圖、測量，將圖片放入項目的images文件夾
• 2、代碼中使用相對路徑

OMG！就這么簡單？是的！就是這么簡單！

“雙十一”做的更多的事

不得不說，面對雙十一這么大量級的一個場景，無線前端對產品質量層面做了很大的把關，當然少不了的是前端界經久不衰的話題——性能優化，那么題主給大家盤點下導購小組做的性能優化上的事。

性能優化，性能優化主要集中在兩個層面上的優化

• 1、網絡加載，可以從資源和圖片上展開，主要有

  • 資源打包壓縮成一個html文件
  • html文件作為離線包加載到手淘包中，因此整個html文件是不存在網絡請求loading的
  • 圖片使用工具進行尺寸控制，在css代碼中添加不同屏幕下采用不同尺寸的圖片的邏輯
  • 圖片組件lib.img對圖片進行精細化控制，根據網絡環境、高清屏幕、屏幕尺寸選擇不同的圖片，將大圖控制在30kb左右
  • 小圖采用base64加載
  • 首屏渲染接口控制為一個

• 2、內存優化，主要在代碼執行和圖片大小兩個方面考慮

  • 圖片大小控制在30kb左右，避免長列表加載過多圖片時產生內存過高的問題
  • 采用高性能統計方案，性能更優
  • css、js代碼書寫盡量避免性能高耗寫法

前端打底數據

• 由于雙十一場景特殊，盡管咱們的后端和算法同學做了大量的優化、數據打底，但是作為頁面的負責，還是需要考慮到接口無法訪問的情況，那么雙十一期間根據接口對數據進行了打底，具體邏輯如下圖：

  

  不得不提的是，ods是無線基于靜態服務器的系統，本身不帶業務邏輯，僅僅提供了三個功能：1、定時獲取接口數據；2、將數據靜態存儲起來；3、提供jsonp的方式供前端調用

最后總結

以上便是無線前端導購小組在本次雙十一的工作流程，當初考慮使用vue＋webpack，大家也在想新的技術是不是能夠經得住考驗，事實證明，經 歷了雙十一這一個大的熔爐下鍛造，這樣的技術實踐已經完全成熟了。最后，以一張大圖結束，總結一下無線導購組vue＋webpack在開發鏈路上的實踐

回頭看看我們的技術目標，我們實現了：

• vuejs——mvvm構建應用，完全無dom操作，狀態管理變得方便
• webpack——模塊化編寫，單文件組件編寫
• 圖片工具——與現有的工具和組件進行整合，完美打通圖片工作鏈路