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，主要解決如下幾個問題：

• 一、讀取webpack配置，運行webpack的loader
• 二、自動補全css3的前綴
• 三、打包、下載、壓縮js代碼，最後將全部文件打包成一個*.html文件

圖片處理？

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

首先，先說說痛點，下圖是否是大多數狀況下圖片的工做流程

那麼，在面對雙十一那麼大的頁面量時，若是以這樣的方式去工做，那必定會崩潰的...所以在雙十一前，團隊已經整理出了一套完整的圖片工做方案，所以在雙十一才能以一個全新的面貌展示給你們，下面筆者給你們進行介紹：

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

  切圖和測量的過程，選用的工具依舊是ps或者sketch，藉助ps cc2014版的切圖插件Cutterman和標註工具Parker進行工做；而sketch就不須要提了，自己自帶的強大標註和導出功能已經讓工做很是便利了

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

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

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

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

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

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

• 彙總起來

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

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

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

「雙十一」作的更多的事

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

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

• 一、網絡加載，能夠從資源和圖片上展開，主要有

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

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

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

前端打底數據

• 因爲雙十一場景特殊，儘管我們的後端和算法同窗作了大量的優化、數據打底，可是做爲頁面的負責，仍是須要考慮到接口沒法訪問的狀況，那麼雙十一期間根據接口對數據進行了打底，具體邏輯以下圖：

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

最後總結

以上即是無線前端導購小組在本次雙十一的工做流程，當初考慮使用vue＋webpack，你們也在想新的技術是否是可以經得住考驗，事實證實，經歷了雙十一這一個大的熔爐下鍛造，這樣的技術實踐已經徹底成熟了。最後，以一張大圖結束，總結一下無線導購組vue＋webpack在開發鏈路上的實踐

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

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