技術(shù)選型的思考
對(duì)于雙十一的場(chǎng)景，我們希望能夠選擇一個(gè)足夠適應(yīng)大型應(yīng)用的的技術(shù)方案，能夠支撐起雙十一這樣的大場(chǎng)景，整體思考上有：
適合大型應(yīng)用的mvvm的框架，去掉復(fù)雜的dom操作，讓代碼變得易于review和維護(hù)
模塊化產(chǎn)品，方便隨時(shí)增減一個(gè)模塊
方便與團(tuán)隊(duì)現(xiàn)有的庫(kù)，工具進(jìn)行整合
基本技術(shù)方案——vue webpack
vue.js——輕量級(jí)的mvvm框架
webpack——前端模塊化解決方案
有同學(xué)會(huì)問，前端社區(qū)可選用的工具和框架這么多，為什么挑選了vue webpack在雙十一的項(xiàng)目中進(jìn)行實(shí)踐，那么我們來盤點(diǎn)下選用上的思考：
vuejs——輕量、學(xué)習(xí)成本低、雙向綁定、無dom的操作、組件的形式編寫
vuejs是個(gè)輕量級(jí)的mvvm框架，集合了angular的基本功能，卻又比angular更為精簡(jiǎn)，功能上涵蓋了雙向綁定、指令、邏輯控制、過濾器、事件監(jiān)聽、函數(shù)等。框架的特點(diǎn)使得項(xiàng)目在狀態(tài)變更、分頁(yè)的場(chǎng)景下可以擁有很大的便利——所有的操作只需要變更數(shù)組，沒有任何的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允許任何的靜態(tài)資源作為模塊進(jìn)行引用，包括css、less、html…等等，那么我們需要做的僅僅是加載必要的loader（加載器），如css-loader、less-loader、style-loader等等，那么webpack與vue結(jié)合起來，我們可以通過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);//實(shí)例化
main.$mount('#app');//渲染
這么一來，使用vue＋webpack，我們實(shí)現(xiàn)了：
更多的實(shí)踐demo筆者在這里就不展開了，有興趣的小伙伴可以閱讀下無線前端@勾股 的一篇博文——just-vue
工具鏈路在實(shí)際開發(fā)上的整合
當(dāng)然，僅僅使用vue webpack，已經(jīng)可以以一種高效的方式進(jìn)行開發(fā)了，但是為了和無線團(tuán)隊(duì)的“私貨”結(jié)合起來，我們的開發(fā)鏈路還更完善些，不過是不是有“私貨”就不能使用了，不是的，事實(shí)上，“私貨”相對(duì)獨(dú)立，開發(fā)時(shí)也可以完全剝離出來，開發(fā)過程可以自行選擇。
本次導(dǎo)購(gòu)產(chǎn)品中，使用vue＋webpack的過程中，將其結(jié)合到了gulp中，同時(shí)引用gulp-htmlone、autoprefixer-core，主要解決以下幾個(gè)問題：
1、讀取webpack配置，運(yùn)行webpack的loader
2、自動(dòng)補(bǔ)全css3的前綴
3、打包、下載、壓縮js代碼，最后將所有文件打包成一個(gè)*.html文件
圖片處理？
上述的介紹中，似乎涵蓋了html、css、js，但是始終沒有提到圖片上面的處理，作為前端頁(yè)面重要的一環(huán)，圖片怎么可能在無線前端中被忽略，筆者下面展開介紹圖片處理上，我們團(tuán)隊(duì)的做法
首先，先說說痛點(diǎn)，下圖是不是大多數(shù)情況下圖片的工作流程
那么，在面對(duì)雙十一那么大的頁(yè)面量時(shí)，如果以這樣的方式去工作，那一定會(huì)崩潰的…因此在雙十一前，團(tuán)隊(duì)已經(jīng)整理出了一套完整的圖片工作方案，因此在雙十一才能以一個(gè)全新的面貌展現(xiàn)給大家，下面筆者給大家進(jìn)行介紹：
1、切圖、測(cè)量（開發(fā)階段）
切圖和測(cè)量的過程，選用的工具依舊是ps或者sketch，借助ps cc2014版的切圖插件cutterman和標(biāo)注工具parker進(jìn)行工作；而sketch就不需要提了，本身自帶的強(qiáng)大標(biāo)注和導(dǎo)出功能已經(jīng)讓工作非常便利了
2、上傳和替換地址（打包階段）
以往的圖片上傳和替換地址的工作都為人工所為，如今無線提供一套圖片工具解決方案，通過監(jiān)聽圖片目錄里圖片文件的更換來執(zhí)行上傳命令，同時(shí)還支持將小圖片轉(zhuǎn)成base64，最后在替換地址上，根據(jù)不同的屏幕分辨率選擇不同的圖片尺寸，總結(jié)下來這套工具做了下面幾件事：
監(jiān)聽圖片文件，執(zhí)行上傳圖片
小圖轉(zhuǎn)換base64
替換掉代碼中的相對(duì)路徑，包括img[src]、background、element.style.background
css代碼中添加根據(jù)屏幕分辨率選擇圖片的邏輯
3、圖片自動(dòng)優(yōu)化（代碼運(yùn)行階段）
在這一層面做的圖片優(yōu)化，是在代碼執(zhí)行過程，也就是頁(yè)面渲染過程。這個(gè)過程基于無線前端的組件lib.img，可以實(shí)現(xiàn)根據(jù)尺寸、弱網(wǎng)判斷、屏幕分辨率進(jìn)行圖片的處理，同時(shí)提供懶加載的功能，歸納起來有：
根據(jù)尺寸選擇圖片
弱網(wǎng)判斷進(jìn)行選擇
設(shè)備分辨率進(jìn)行選擇
根據(jù)圖片質(zhì)量要求進(jìn)行選擇
匯總起來
前期腳手架搭好后，最后我們的圖片工作流程可能就只需要做下面幾個(gè)工作，也就是上述"開發(fā)階段"需要做的事情：
1、切圖、測(cè)量，將圖片放入項(xiàng)目的images文件夾
2、代碼中使用相對(duì)路徑
omg！就這么簡(jiǎn)單？是的！就是這么簡(jiǎn)單！
“雙十一”做的更多的事
不得不說，面對(duì)雙十一這么大量級(jí)的一個(gè)場(chǎng)景，無線前端對(duì)產(chǎn)品質(zhì)量層面做了很大的把關(guān)，當(dāng)然少不了的是前端界經(jīng)久不衰的話題——性能優(yōu)化，那么題主給大家盤點(diǎn)下導(dǎo)購(gòu)小組做的性能優(yōu)化上的事。
性能優(yōu)化，性能優(yōu)化主要集中在兩個(gè)層面上的優(yōu)化
1、網(wǎng)絡(luò)加載，可以從資源和圖片上展開，主要有
資源打包壓縮成一個(gè)html文件
html文件作為離線包加載到手淘包中，因此整個(gè)html文件是不存在網(wǎng)絡(luò)請(qǐng)求loading的
圖片使用工具進(jìn)行尺寸控制，在css代碼中添加不同屏幕下采用不同尺寸的圖片的邏輯
圖片組件lib.img對(duì)圖片進(jìn)行精細(xì)化控制，根據(jù)網(wǎng)絡(luò)環(huán)境、高清屏幕、屏幕尺寸選擇不同的圖片，將大圖控制在30kb左右
小圖采用base64加載
首屏渲染接口控制為一個(gè)
2、內(nèi)存優(yōu)化，主要在代碼執(zhí)行和圖片大小兩個(gè)方面考慮
圖片大小控制在30kb左右，避免長(zhǎng)列表加載過多圖片時(shí)產(chǎn)生內(nèi)存過高的問題
采用高性能統(tǒng)計(jì)方案，性能更優(yōu)
css、js代碼書寫盡量避免性能高耗寫法
前端打底數(shù)據(jù)
由于雙十一場(chǎng)景特殊，盡管咱們的后端和算法同學(xué)做了大量的優(yōu)化、數(shù)據(jù)打底，但是作為頁(yè)面的負(fù)責(zé)，還是需要考慮到接口無法訪問的情況，那么雙十一期間根據(jù)接口對(duì)數(shù)據(jù)進(jìn)行了打底，具體邏輯如下圖：
不得不提的是，ods是無線基于靜態(tài)服務(wù)器的系統(tǒng)，本身不帶業(yè)務(wù)邏輯，僅僅提供了三個(gè)功能：1、定時(shí)獲取接口數(shù)據(jù)；2、將數(shù)據(jù)靜態(tài)存儲(chǔ)起來；3、提供jsonp的方式供前端調(diào)用
最后總結(jié)
以上便是無線前端導(dǎo)購(gòu)小組在本次雙十一的工作流程，當(dāng)初考慮使用vue＋webpack，大家也在想新的技術(shù)是不是能夠經(jīng)得住考驗(yàn)，事實(shí)證明，經(jīng)歷了雙十一這一個(gè)大的熔爐下鍛造，這樣的技術(shù)實(shí)踐已經(jīng)完全成熟了。最后，以一張大圖結(jié)束，總結(jié)一下無線導(dǎo)購(gòu)組vue＋webpack在開發(fā)鏈路上的實(shí)踐