高效開發 Web 單頁應用解決方案

於 2017 年初，有在 Github 創建並維護一個項目：Vue Boilerplate Template，欲成就一款開箱即用 Vue + Webpack 的腳手架模版；其目標與宗旨是：根據以往經驗提供一些參考，對於如何構建中大型 Vue 項目。這蠻久以來，有堅持維護更新，各項主要依賴庫，基本都保持着同步升級；記載這篇文章，便是對關於它的設計作下更全面的闡述，以起到項目 Wiki 的做用。

關於此 Vue、Webpack 腳手架模版

這是一個用以開發 Web 單頁應用的腳手架項目；謹以 Vue 爲開發框架、Webpack 爲構建工具，element-ui 爲 UI 組件庫；同時注入了 vue-router、vuex、vue-i18n，用以支持單頁應用，複雜的狀態管理，以及多語言設定；另外依賴了 lodash、dayjs、js-cookie 等開發工具庫，以提高頁面開發效率。固然，在實際項目中，可根據實際須要自由移除或者修改。在此項目中提供了兩個演示頁，您能夠在線查看。

對於如何使用這款腳手架模版，例如先決條件，用法等在 README 中已作說明，此處就不在贅述。此腳手架模版，是基於 vue-cli 所構建，那時 vue-cli 版本還在 2.*；再有就是，主張項目是能夠開箱即用，像 vuex、 eslint、sass 等都默認引入（其好處在於：能夠清晰較爲全套的項目設定；假若無需多語言，可在此基礎之上作減法，移除 vue-i18n 及相關代碼便可；二來，也無需編寫些額外代碼，來支持用戶選擇性注入依賴，以節省精力，開發更多有價值的功能；三來，這也算是一種道的提倡，像 eslint、 pre-commit 等對於團隊項目，都是極爲必要的存在，默認引入，也算理所應當）；因此其整個目錄結構是這樣：

├── LICENSE --------------- 項目許可證（MIT License）文件
├── build ----------------- 存放項目構建相關文件
├── config ---------------- 存放項目構建相關配置文件
├── dist ------------------ 存放項目構建後的輸出文件
├── index.ejs ------------- 項目起始文件 (/index.html)
├── package-lock.json ----- 記錄用 npm 修改依賴操做的鎖文件
├── package.json ---------- npm 的 package.json 處理細節
├── src ------------------- 項目程序主代碼文件夾
│   ├── App.vue ----------- 應用程序的主組件
│   ├── assets ------------ 存放資源：樣式、圖片、字體
│   ├── components -------- 項目自定義的公共組件
│   ├── constants --------- 項目自定義的公共常量
│   ├── filters.js -------- 項目自定義的 vue 過濾指令
│   ├── global.js --------- 協助分擔 main.js 工做
│   ├── helper ------------ 項目自定義輔助各種工具
│   ├── locales ----------- 存放(公用)多語言配置
│   ├── main.js ----------- 項目代碼的人口文件
│   ├── mixins ------------ 存放 mixin 代碼相關
│   ├── router ------------ 存放 & 處理路由相關
│   ├── store ------------- 存放 & 處理 Vuex 相關
│   └── views ------------- 存放項目頁面代碼
├── static ---------------- 靜態的 assets(不被 webpack 處理)
├── test ------------------ 項目各種測試相關
└── yarn.lock ------------- 記錄用 yarn 修改依賴操做的鎖文件

項目背後的環境設定

先從環境提及；衆所周知，鑑於 JavaScript 的發展歷史，隨着其版本的不斷更新，更多新語法和代碼特性被引入進來，使得編寫 JavaScript 體驗持續邁向更好。雖然部分瀏覽器沒有能提供很好的支持，但此腳手架已然引入 babel 系依賴，您能夠放心放心 ES6 甚至更超前版本，而不用擔憂形成兼容性問題。一樣，對於 CSS 也是同樣，這裏已引入 autoprefixer，並做了相應設定，您能夠放心使用新特性、預處理語言等，而不用關注瀏覽器供應商前綴。

代碼及提交規則約束

這是相當重要的，對於代碼的設計和編寫；由於：代碼首先是寫給人，而後纔是寫給機器 —— 出自《代碼大全》。在設計代碼時候，爲其賦予可讀性而花費的時間和努力，絕對物有所值；然而，要求每位成員自覺保持代碼統一質量/風格，這種事情的難度，不亞於靠一己之力去上青天。因此 eslint 系依賴，絕對是團隊項目必裝神器；並將其注入於 Git 的 pre-commit 鉤子內，以強制約定儘量統一代碼風格；此時江山一統，方有可傳萬世之機。另外，對於代碼的提交，也是同理，圖一時之省心，而提交的無心義 message，這並非好習慣；由於當你回頭再看，你會發覺全部錯的事情，都發生在最對的時間裏。幸虧的是，對於這些工做，此腳手架已經幫您作好；固然您能夠根據團隊總體喜愛而做調整。

所提供的全局性方法

對於代碼的編寫效率，也是尤其的重要；畢竟：「天下武功，惟快不破；即使說輕功不表武功，但速度決定了你我の距離」；更嚴肅的做證這個觀點是：只有快速完成需求，纔有時間去學習更多、或在關鍵點上做優化。故此，在此腳手架中，已將經常使用的工具、插件、方法，經過添加至 Vue 全局實例，以方便調用；譬如：經過添加至 Vue.prototype，或者全局 mixin(minxns/globalMixin.js) 以及過濾(filters.js)等；

import _ from '@helper/lodash.js'
import { $apis, $utils } from '@helper'

Vue.prototype.$_ = _
Vue.prototype.$apis = $apis
Vue.prototype.$utils = $utils

如上這般，您就不用在使用時候反覆 import， 直接像這樣 this.$_.debounce 使用便可，從而大幅度節省您的編寫時間開支；對於其中 $ 符號，是我的偏心的標記，以方便知曉其是來自全局；固然，您能夠修改成您所歡喜的記號。您能夠看到在 helper 文件夾下，特地開闢出一個文件 lodash.js，用以優化對 lodash 的使用，同時也是爲了方便使用；這在 《Webpack 打包優化之體積篇》的 儘可能使用模塊化引入 中有過詳細敘述。同理，您能夠對所引入的各種庫，進行再次封裝，以使得再項目中可便捷調用，同時能夠統一修改、更替，而無需操做調用的地方。另外，值得一提的是對於 HTTP 請求相關的處理。

更優雅的處理 Http 請求

下面是一個上古時代關於處理 Http 請求的實例；以如今的視角來看，它顯得有些極端，甚至有些難以想象，倒是至今仍然家常便飯的玩法（即便用的是當下流行的 MVVM 框架，即使 Query.ajax 也是支持鏈式調用）；然而，不乏有勤勞的開發者，不厭其煩的寫着相似的代碼，這自己倒也沒什麼；但當交給別人去維護、或者去讀的時候，容易形成身心上的創傷。

$.ajax({
  type: "GET",
  url: "xxx/getYyyContent",
  data: { username: $("#username").val() },
  dataType: "json",
  success: function (data) {
    const textContent = data.data.textContent
    $('#text-content').html(textContent)
  },
  error: function (error) {
    // Do something to handle Error
  },
  complete: function (error) {
    // 作額外的處理不管請求成功或失敗
  }
});

大道至簡，優秀的開發流程，必定是便於編寫和維護！本腳手架引用類庫 axios 和 q，並對其進行簡單封裝，以處理 Http 請求相關；使其可以支持鏈式調用，同時對返回數據統一處理，精簡返回內容，使得在獲取到最終結果處，能夠儘量簡單，詳見 helper/ajax.js；另外，推薦開發者將接口，按照功能模塊規劃，分門別類以存放至統一文件夾下，如 helper/apis；如此清晰明瞭，方便調用，且對於多人協做開發，又不相互響應，減小沒必要要的衝突。相似善用配置，以表驅動法的編程手法，應該活學活用，貫穿始終；具體更詳細的陳述，可參見 如何漂亮使用 Vue 之基礎篇。假若以此法來處理 Http 請求，那如上磨人的示例，便可修改成以下模樣：

const params = { username: this.form.username }
this.$apis.xxx.getYyyContent(params).then(result => {
  this.textContent = result.textContent
}).catch(error => {
  // Do something to handle Error
}).fin(() => {
  // 作額外的處理不管請求成功或失敗
})

貼心的路由（Router）配置

使用 MVVM 框架 + *-router 來建立單頁應用，已成爲一種主流。在此腳手架中，已將 vue-router 添加進來，並進行了處理；並附有示例：router/routes/demo.js；您能夠自由的添加路由及頁面映射，來豐盈您的應用程序；同時，您還能爲其配置各類頁面信息（如：標題、是否須權限驗證等）。 對於路由配置，更爲貼心的配置，在處理與導航欄(/側邊欄)相關部分。

在先後端分離的現代化 Web 應用中，導航欄配置通常由先後端共同做用：後端負責給予相關配置數據，前端則掌管數據與頁面的映射；爲了節省工做量，深度拷貝前端路由配置，遞歸遍歷移除無需在導航欄展現項，再融合後端數據，便可組裝出一套後臺可配置的應用導航列表，而不用牽扯改動前端。固然，您能夠根據業務需求，添加更多設定，使得程序擁有更佳的訪問、維護體驗。好比：爲避免每次刷新界面，都發起請求導航欄數據，應將持久化存儲（Eg：localStorage）等等。

完善的 Webpack 打包優化

這是此腳手架一大亮點，即保持着對主流依賴庫的更新及優化，如：webpack、element-ui 等。使用 webpack 來構建 Web 應用程序，如何使其呈現良好的構建速度、優化構建後包體積/文件數量、提高其運行效率等，是每位前端開發者都該去了解的。在這方面，也做了不少學習與嘗試，並將些經驗記載於：Webpack 打包優化之體積篇 & Webpack 打包優化之速度篇。關於其配置方案，參見 Vue Webpack Config；固然，十分歡迎提出您寶貴的建議，協助進一步完善之。另外，值得一提的是，關於構建包的體積與文件數的平衡：避免形成體量很大或很小的包；對此，Webpack 方面也提供不少插件來輔助這件事，譬如：LimitChunkCountPlugin、MinChunkSizePlugin。鑑於 HTTP 工做機制，在不破壞按需加載的基礎上，使得所構建出的 js 文件，數量儘量少，文件又不過大(100kb ~ 500kb)是一個不錯的選擇，固然這裏指的的是服務端開啓 gip 壓縮的狀況下；若是是由前端負責開啓 gzip 壓縮，這個 Size 上限應該更低些爲宜。除了外，考慮經過 HTTP/2 來對項目項目進行優化，是另外一個緯度的解決方案，在此就很少作探討。

支持漸進式 Web 應用程序

漸進式 Web 應用程序（PWA ～ Progressive Web App）：它的存在，使得在網絡上提供驚人用戶體驗的新方式，它爲構建高質量的漸進式 Web 應用程序，提供了使人難以置信的優點，能夠輕鬆取悅用戶，增長參與度並增長轉化次數。因此這已經成爲了現代化 Web 應用程序必作工做。本腳手架對 PWA 的支持，選擇參考了 vuejs-templates/pwa，其中用到 sw-precache-webpack-plugin 插件協助生成 service-worker.js。鑑於 serviceWorker 自己的些許限制，此模版默認不引入此功能，取消此行被註釋的代碼，便可打開該功能。關於這部分更多，可參見優化網頁 Performance、Progressive、Accessibility、Best Practices 相關提交 & 陳述。推薦您使用 Lighthouse 谷歌瀏覽擴展，來對本身的 Web 應用跑分，以查糾項目中潛存的可優化點。

須要補充說明的是：您能夠在項目全局搜索 ~@CHANGE@~ 關鍵字，這是對於可變化設定的標記；您能夠根據項目實際所需，對該部分進行修改。

腳手架提供的默認命令

您知道，npm（yarn 亦同）容許在 package.json 文件裏面，使用 scripts 字段定義腳本命令。它支持通配符、變量、鉤子、外部傳參、支持併發 & 異步執行等等；因此，徹底能夠藉助 npm script，打造屬於本身的高效工做流。在此腳手架中，默認只是些提供了簡單命令，您能夠在本身的腳本中，結合您歡喜的工具，如 gulp、bash 等，來塑造屬於您的高效工做流。下面對默認命令略做說明：

npm (yarn) 命令	功能描述
yarn start	運行項目以開發環境，是 yarn run dev 的快捷版方式
yarn run build:dll	構建出 vendor.dll.js，依據 webpack.dll.conf.js
yarn run build	構建項目，以生產環境
yarn run jarvis	運行 webpack-jarvis（很是智能的基於瀏覽器的Webpack儀表板）在 http://localhost:1337/
yarn run analyz	對所構建的包進行可視化呈現，在 http://localhost:8888/
yarn run preview	對項目進行在本地預覽，以生產環境，在 http://localhost:3000/
yarn run pretest	對生產環境所構建的包進行簡單的「預測」：在 http://localhost:3000/

使用此腳手架的線上項目

• 「傾城之鏈｜NICE LINKS」：一個開放平臺，旨在雲集全球優秀網站，探索互聯網中更廣闊的世界；在這裏，你能夠輕鬆發現、學習、分享更多有用或有趣的事物。

項目待優化的那些方向

• 完善單元測試相關；在代碼層面，作好單元測試，有助於提高代碼質量，從而使得項目質量、後續維護均可以更好。考慮將在以後的版本中，參考 Vue Test Utils 對這塊兒進行完善。
• SEO 優化相關；這是多方都應該考慮的問題；但在項目設計層面，能夠考慮服務端渲染來極大提高 SEO；但這對於已經處於開發階段的項目，涉及須要更多的調整，相比於其餘的方案。「傾城之鏈｜NICE LINKS」 是基於 prerender，在 nginx 層面，針對瀏覽器做預渲染以優化 SEO，如今看起來效果能夠。 另外能夠選擇的方案是 Prerender SPA Plugin，在 Webpack 構建項目時預渲染靜態 html 內容，；在將來版本中，會考慮針對這塊兒給出一個相對摺中的方案。

寫在最後的結語

對於分享，您的海量包容和意見建議，是促進彼此都能更上一層樓的關鍵。輸出文字，老是比寫代碼辛苦的多；在付出多時的敲敲打打以後，但願能夠獲得您寶貴的意見和建議，使得此腳手架能夠更進一步，以惠及到更多的人。最後，推薦您體驗我的最新做品 ～ 「傾城之鏈｜NICE LINKS」： 傾心締造，癡心爲你，但願您會喜歡。

@2018-05-13 於深圳.南山 Last Modify： 2018-05-20

---

你可能感興趣(/有用)的文章：

• 如何寫一手漂亮的Vue
• Webpack 打包優化之速度篇
• Webpack 打包優化之體積篇
• Npm vs Yarn 之備忘詳單
• 『引』最全前端資源聚集
• 與時俱進版前端資源教程
• 晚晴幽草說之-前端札記
• 所歷前端「姿式」更替記(其一)
• 牆裂推薦文章集錦