Vue筆記五：Vue選型和Webpack入門
Vue的選型
現在面試前端者都會在自己簡歷上寫上精通這三個框架，但是仔細一問就三不知。在縱觀幾個大型前端框架后，我想得出一結論，問什么選擇Vue框架呢？
下面我們對這三個框架進行對比。
Vue與Angular
一切要從Vue1.0講起，回顧一下歷史。Vue在項目初期命名為Angular Lite，說明了我們Vue1.0和Angular之間的關系，它的初始目標是一個精簡版的Angular。它們的共同點在于它們都擁有雙向綁定機制和指令。Angular（后面簡稱為ng）和Vue的異同點如下：
- ng是一個完整的mvvm框架，vue主要是view層展示
- ng雙向綁定基于模版編譯規則（“臟”檢查), vue是采用es5的get和set機制
- vue可以el對象進行實例化，組件化
- ng框架重，整個設計模式具有依賴注入的思想，學習曲線比較陡峭
- ng2斷層式升級，但是ng2更吸引人
總而言之，Angular的“大而整”的結構讓它在構建項目的過程當中得心應手，但是Vue的“小而美”組件化結構卻是符合我輕量級應用項目的需求。因為現在很多的頁面內容都集中在移動端。說到小而美的“組件化思想”，我們會提到Vue和React。
Vue與React
在聽了尤雨溪的知乎live后，我更加明白vue2大量地借鑒了很多React的特性。React也算是“js大一統”思想的鼻祖，運用了css in html(jsx)和css in js的特點，實現組件化的高度復用。而尤大大則是另辟蹊徑制作了vue-loader和vueify,通過webpack和browserify打包項目工程內容。運用<template>和<style>去包裝html（或者模版語言）和css（或者各種預編譯器）。我個人認為vue的這種寫法更加聰明和輕量化。
它們兩之間的區別：
- React的es5與es6寫法
- React的JSX和CSS IN JS的寫法
- this相關的行為
- React的生態鏈，學習成本
- Vue的雙向綁定和React的單向數據流
綜上所述，Vue2.0也引入了單項數據流的思想，主要是用在Vuex和props的方面。雙向綁定使用在表現層，方便開發者使用，相對來說性能開銷會比較大。單向數據流的優勢在于效率，雙向綁定的優勢在于開發便利性，混合式的推拉數據都是為了實現更好的開發體驗。相對來說，React則是完整而龐大，就如flux思想的數據流，就有Redux和Mobx，生態化的組件庫就更多了，一定程度上提高了學習成本。
之所以選擇Vue，還是考慮兩點，第一，移動端Vue的包相對小，加載效率高。第二，外包員工多，較低的學習成本比較適合。
Vue1.0與2.0的區別
一年前，我翻譯了一篇Vue1.0的教程Vue筆記二：進階[譯]用Webpack構建Vue，現在已經有點不適用了。
Vue2.0的升級可以說是革命性的，如果很多人把Vue1.0當作“玩具”，那么Vue2.0可以說是“工具”，可以很好地使用于生產環境。得益于以下的特性：
- virtual dom
- 強調單向數據流，推薦vuex
- api區別，生命周期調整
如果說Vue1.0師從Angular，而Vue2.0師從React。Vue2.0把組件化的實現展現得淋漓盡致，主要表現在組件的高度復用和可維護性，得益于較低的學習成本。2.0的兩個升級特點應該放在單向數據流和Virtual-dom上。
單向數據流正如我上述描述的，是出于效率的“推”的“數據流”設計。Mutations是針對state的數據進行修改，state會通過mapGetters和mapStates影響者Vue組件。在組件內可以通過mapActions（或者mapMutations）。Actions更多是異步請求操作。所以，整個數據流是一個閉環，相互影響，相互傳遞。
虛擬dom是最近挺火的一個概念，但是不見得一定需要它。Virtual-dom涉及到一個概念，那就是重繪重排。在大量的dom操作的情況下，Virtual-dom才會起到它的價值。它的實現原理便是在dom之間做了一個虛擬層，在狀態改變了后，做一次diff，把變化的dom一次性以補丁的方式給dom進行修改，減少了dom的變化。
webpack的入門
橫向對比
作為Vue的好“基友”，webpack應該是這幾年的最重要的打包工具。有別于gulp和grunt這種自動化工具，它更關注于模塊化的思想，讓js的開發變得更加方便。相較于browserify，webpack的自由度會更好。相比于rollup，webapck更適合使用于項目當中。
gulp- browserify
- rollup
基本概念
要掌握好webpack，需要了解好四個以下概念：
- entry
- output
- loader
- plugin
入口是打包的起始位置，分為js和html入口。出口是輸出文件內容，可以使用hash命名進行緩存。loader則是抽離各種其他的文件，例如css，圖片等等。plugins是更多的批量化操作。
loader
各式各樣的loader非常多，這里不一一舉例。
- less-loader
- sass-loader
- url-loader, file-loader
- babel-loader
- vue-loader, vux-loader
plugin
通過plugins對你打包項目內部的文件進行整理。例如js壓縮，html壓縮，公共包的提取等。
- UglifyJsPlugin
- CommonsChunkPlugin
- HtmlWebpackPlugin
- OccurrenceOrderPlugin
...
多頁面打包
官方給出的Vue項目構建模版是單頁面項目。但是在國內可能不是所有項目都那么完整的出來所有的需求。這時，我們需要的是多頁面的打包情況。我們會考慮在utils里面加一個getEntries的函數，這個函數會返回一個對應路徑的數組，里面包括所有對應的js文件。
exports.getEntries = function (globPath) {
let entries = {},
basename,
tmp,
pathname;
glob.sync(globPath).forEach((entry) => {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.slice(0, 2).join('/'); // 正確輸出js路徑
entries[pathname] = entry;
});
return entries;
};
utils.getEntries('./src/module/**/*.js')
概括一下，就是調整一下，整個打包的項目，改為以下幾點，詳情可以參考PaicFE/keynote。
- 多個js入口（將entries改為數組）
- 多個html入口（基于HtmlWebpackPlugin）
- 單元測試調整
未來方向
未來的方向主要專注于性能優化上，主要是對h5頁面在移動端的細小性能優化。
- SSR（server side rendering）
- Nuxt.js
- 異步請求（promise，async/await）
- 動態路由 (vue-router)
參考
轉載，請表明出處。總目錄前段收集器
