高效開發(fā) Web 單頁應(yīng)用解決方案，web應(yīng)用解決方案

于 2024 年初，有在 Github 建立并維護(hù)一個項目：Vue Boilerplate Template，欲成就一款開箱即用 Vue + Webpack 的腳手架模版；其目標(biāo)與宗旨是：根據(jù)以往經(jīng)驗提供一些參考，對于如何構(gòu)建中大型 Vue 項目。愛掏網(wǎng) - it200.com這蠻久以來，有堅持維護(hù)更新，各項主要依賴庫，基本都保持著同步升級；記載這篇文章，即是對關(guān)于它的設(shè)計做下更全面的闡述，以起到項目 Wiki 的作用。愛掏網(wǎng) - it200.com

關(guān)于此 Vue、Webpack 腳手架模版

這是一個用以開發(fā) Web 單頁應(yīng)用的腳手架項目；謹(jǐn)以 Vue 為開發(fā)框架、Webpack 為構(gòu)建工具，element-ui 為 UI 組件庫；同時注入了 vue-router、vuex、vue-i18n，用以支持單頁應(yīng)用，復(fù)雜的狀態(tài)管理，以及多語言設(shè)定；另外依賴了 lodash、dayjs、js-cookie 等開發(fā)工具庫，以提升頁面開發(fā)效率。愛掏網(wǎng) - it200.com當(dāng)然，在實際項目中，可根據(jù)實際需要自由移除或者修改。愛掏網(wǎng) - it200.com在此項目中提供了兩個演示頁，您可以在線查看。愛掏網(wǎng) - it200.com

對于如何使用這款腳手架模版，例如先決條件，用法等在 README 中已做說明，此處就不在贅述。愛掏網(wǎng) - it200.com此腳手架模版，是基于 vue-cli 所構(gòu)建，那時 vue-cli 版本還在 2.*；再有就是，主張項目是可以開箱即用，像 vuex、 eslint、sass 等都默認(rèn)引入（其好處在于：可以清晰較為全套的項目設(shè)定；倘若無需多語言，可在此基礎(chǔ)之上做減法，移除 vue-i18n 及相關(guān)代碼即可；二來，也無需編寫些額外代碼，來支持用戶選擇性注入依賴，以節(jié)省精力，開發(fā)更多有價值的功能；三來，這也算是一種道的提倡，像 eslint、 pre-commit 等對于團(tuán)隊項目，都是極為必要的存在，默認(rèn)引入，也算理所應(yīng)當(dāng)）；所以其整個目錄結(jié)構(gòu)是這樣：

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

項目背后的環(huán)境設(shè)定

先從環(huán)境說起；眾所周知，鑒于 JavaScript 的發(fā)展歷史，隨著其版本的不斷更新，更多新語法和代碼特性被引入進(jìn)來，使得編寫 JavaScript 體驗持續(xù)邁向更好。愛掏網(wǎng) - it200.com雖然部分瀏覽器沒有能提供很好的支持，但此腳手架已然引入 babel 系依賴，您可以放心放心 ES6 甚至更超前版本，而不用擔(dān)心造成兼容性問題。愛掏網(wǎng) - it200.com同樣，對于 CSS 也是一樣，這里已引入 autoprefixer，并作了相應(yīng)設(shè)定，您可以放心使用新特性、預(yù)處理語言等，而不用關(guān)注瀏覽器供應(yīng)商前綴。愛掏網(wǎng) - it200.com

代碼及提交規(guī)則約束

這是至關(guān)重要的，對于代碼的設(shè)計和編寫；因為：代碼首先是寫給人，然后才是寫給機(jī)器 —— 出自《代碼大全》。愛掏網(wǎng) - it200.com在設(shè)計代碼時候，為其賦予可讀性而花費的時間和努力，絕對物有所值；然而，要求每位成員自覺保持代碼統(tǒng)一質(zhì)量/風(fēng)格，這種事情的難度，不亞于靠一己之力去上青天。愛掏網(wǎng) - it200.com所以 eslint 系依賴，絕對是團(tuán)隊項目必裝神器；并將其注入于 Git 的 pre-commit 鉤子內(nèi)，以強(qiáng)制約定盡可能統(tǒng)一代碼風(fēng)格；此時江山一統(tǒng)，方有可傳萬世之機(jī)。愛掏網(wǎng) - it200.com另外，對于代碼的提交，也是同理，圖一時之省心，而提交的無意義 message，這并不是好習(xí)慣；因為當(dāng)你回頭再看，你會發(fā)覺所有錯的事情，都發(fā)生在最對的時間里。愛掏網(wǎng) - it200.com幸好的是，對于這些工作，此腳手架已經(jīng)幫您做好；當(dāng)然您可以根據(jù)團(tuán)隊整體喜好而作調(diào)整。愛掏網(wǎng) - it200.com

所提供的全局性方法

對于代碼的編寫效率，也是尤為的重要；畢竟：“天下武功，唯快不破；即便說輕功不表武功，但速度決定了你我の距離”；更嚴(yán)肅的作證這個觀點是：只有快速完成需求，才有時間去學(xué)習(xí)更多、或在關(guān)鍵點上作優(yōu)化。愛掏網(wǎng) - it200.com故此，在此腳手架中，已將常用的工具、插件、方法，通過添加至 Vue 全局實例，以方便調(diào)用；譬如：通過添加至 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

如上這般，您就不用在使用時候反復(fù) import， 直接像這樣 this.$_.debounce 使用即可，從而大幅度節(jié)省您的編寫時間開支；對于其中 $ 符號，是個人偏愛的標(biāo)記，以方便知曉其是來自全局；當(dāng)然，您可以修改為您所歡喜的記號。愛掏網(wǎng) - it200.com您可以看到在 helper 文件夾下，特意開辟出一個文件 lodash.js，用以優(yōu)化對 lodash 的使用，同時也是為了方便使用；這在 《Webpack 打包優(yōu)化之體積篇》的 盡量使用模塊化引入 中有過詳細(xì)敘述。愛掏網(wǎng) - it200.com同理，您可以對所引入的各類庫，進(jìn)行再次封裝，以使得再項目中可便捷調(diào)用，同時可以統(tǒng)一修改、更替，而無需操作調(diào)用的地方。愛掏網(wǎng) - it200.com另外，值得一提的是對于 HTTP 請求相關(guān)的處理。愛掏網(wǎng) - it200.com

更優(yōu)雅的處理 Http 請求

下面是一個上古時代關(guān)于處理 Http 請求的實例；以現(xiàn)在的視角來看，它顯得有些極端，甚至有些不可思議，卻是至今仍然屢見不鮮的玩法（即使用的是當(dāng)下流行的 MVVM 框架，即便 Query.ajax 也是支持鏈?zhǔn)秸{(diào)用）；然而，不乏有勤勞的開發(fā)者，不厭其煩的寫著類似的代碼，這本身倒也沒什么；但當(dāng)交給別人去維護(hù)、或者去讀的時候，容易造成身心上的創(chuàng)傷。愛掏網(wǎng) - it200.com

$.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) {
    // 做額外的處理無論請求成功或失敗
  }
});

大道至簡，優(yōu)秀的開發(fā)流程，一定是便于編寫和維護(hù)！本腳手架引用類庫 axios 和 q，并對其進(jìn)行簡單封裝，以處理 Http 請求相關(guān)；使其能夠支持鏈?zhǔn)秸{(diào)用，同時對返回數(shù)據(jù)統(tǒng)一處理，精簡返回內(nèi)容，使得在獲取到最終結(jié)果處，可以盡可能簡單，詳見 helper/ajax.js；另外，推薦開發(fā)者將接口，按照功能模塊規(guī)劃，分門別類以存放至統(tǒng)一文件夾下，如 helper/apis；如此清晰明了，方便調(diào)用，且對于多人協(xié)作開發(fā)，又不相互響應(yīng)，減少不必要的沖突。愛掏網(wǎng) - it200.com類似善用配置，以表驅(qū)動法的編程手法，應(yīng)該活學(xué)活用，貫穿始終；具體更詳細(xì)的陳述，可參見 如何漂亮使用 Vue 之基礎(chǔ)篇。愛掏網(wǎng) - it200.com倘若以此法來處理 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 來創(chuàng)建單頁應(yīng)用，已成為一種主流。愛掏網(wǎng) - it200.com在此腳手架中，已將 vue-router 添加進(jìn)來，并進(jìn)行了處理；并附有示例：router/routes/demo.js；您可以自由的添加路由及頁面映射，來豐盈您的應(yīng)用程序；同時，您還能為其配置各種頁面信息（如：標(biāo)題、是否須權(quán)限驗證等）。愛掏網(wǎng) - it200.com 對于路由配置，更為貼心的配置，在處理與導(dǎo)航欄(/側(cè)邊欄)相關(guān)部分。愛掏網(wǎng) - it200.com

在前后端分離的現(xiàn)代化 Web 應(yīng)用中，導(dǎo)航欄配置一般由前后端共同作用：后端負(fù)責(zé)給予相關(guān)配置數(shù)據(jù)，前端則掌管數(shù)據(jù)與頁面的映射；為了節(jié)省工作量，深度拷貝前端路由配置，遞歸遍歷移除無需在導(dǎo)航欄展示項，再融合后端數(shù)據(jù)，即可組裝出一套后臺可配置的應(yīng)用導(dǎo)航列表，而不用牽扯改動前端。愛掏網(wǎng) - it200.com當(dāng)然，您可以根據(jù)業(yè)務(wù)需求，添加更多設(shè)定，使得程序擁有更佳的訪問、維護(hù)體驗。愛掏網(wǎng) - it200.com比如：為避免每次刷新界面，都發(fā)起請求導(dǎo)航欄數(shù)據(jù)，應(yīng)將持久化存儲（Eg：localStorage）等等。愛掏網(wǎng) - it200.com

完善的 Webpack 打包優(yōu)化

這是此腳手架一大亮點，即保持著對主流依賴庫的更新及優(yōu)化，如：webpack、element-ui 等。愛掏網(wǎng) - it200.com使用 webpack 來構(gòu)建 Web 應(yīng)用程序，如何使其呈現(xiàn)良好的構(gòu)建速度、優(yōu)化構(gòu)建后包體積/文件數(shù)量、提升其運行效率等，是每位前端開發(fā)者都該去了解的。愛掏網(wǎng) - it200.com在這方面，也作了很多學(xué)習(xí)與嘗試，并將些經(jīng)驗記載于：Webpack 打包優(yōu)化之體積篇 & Webpack 打包優(yōu)化之速度篇。愛掏網(wǎng) - it200.com關(guān)于其配置方案，參見 Vue Webpack Config；當(dāng)然，十分歡迎提出您寶貴的建議，協(xié)助進(jìn)一步完善之。愛掏網(wǎng) - it200.com另外，值得一提的是，關(guān)于構(gòu)建包的體積與文件數(shù)的平衡：避免造成體量很大或很小的包；對此，Webpack 方面也提供很多插件來輔助這件事，譬如：LimitChunkCountPlugin、MinChunkSizePlugin。愛掏網(wǎng) - it200.com鑒于 HTTP 工作機(jī)制，在不破壞按需加載的基礎(chǔ)上，使得所構(gòu)建出的 js 文件，數(shù)量盡可能少，文件又不過大(100kb ~ 500kb)是一個不錯的選擇，當(dāng)然這里指的的是服務(wù)端開啟 gip 壓縮的情況下；如果是由前端負(fù)責(zé)開啟 gzip 壓縮，這個 Size 上限應(yīng)該更低些為宜。愛掏網(wǎng) - it200.com除了外，考慮通過 HTTP/2 來對項目項目進(jìn)行優(yōu)化，是另一個緯度的解決方案，在此就不多做探討。愛掏網(wǎng) - it200.com

支持漸進(jìn)式 Web 應(yīng)用程序

漸進(jìn)式 Web 應(yīng)用程序（PWA ～ Progressive Web App）：它的存在，使得在網(wǎng)絡(luò)上提供驚人用戶體驗的新方式，它為構(gòu)建高質(zhì)量的漸進(jìn)式 Web 應(yīng)用程序，提供了令人難以置信的優(yōu)勢，可以輕松取悅用戶，增加參與度并增加轉(zhuǎn)化次數(shù)。愛掏網(wǎng) - it200.com所以這已經(jīng)成為了現(xiàn)代化 Web 應(yīng)用程序必做工作。愛掏網(wǎng) - it200.com本腳手架對 PWA 的支持，選擇參考了 vuejs-templates/pwa，其中用到 sw-precache-webpack-plugin 插件協(xié)助生成 service-worker.js。愛掏網(wǎng) - it200.com鑒于 serviceWorker 本身的些許限制，此模版默認(rèn)不引入此功能，取消此行被注釋的代碼，即可打開該功能。愛掏網(wǎng) - it200.com關(guān)于這部分更多，可參見優(yōu)化網(wǎng)頁 Performance、Progressive、Accessibility、Best Practices 相關(guān)提交 & 陳述。愛掏網(wǎng) - it200.com推薦您使用 Lighthouse 谷歌瀏覽擴(kuò)展，來對自己的 Web 應(yīng)用跑分，以查糾項目中潛存的可優(yōu)化點。愛掏網(wǎng) - it200.com

需要補(bǔ)充說明的是：您可以在項目全局搜索 ~@CHANGE@~ 關(guān)鍵字，這是對于可變化設(shè)定的標(biāo)記；您可以根據(jù)項目實際所需，對該部分進(jìn)行修改。愛掏網(wǎng) - it200.com

腳手架提供的默認(rèn)命令

您知道，npm（yarn 亦同）允許在 package.json 文件里面，使用 scripts 字段定義腳本命令。愛掏網(wǎng) - it200.com它支持通配符、變量、鉤子、外部傳參、支持并發(fā) & 異步執(zhí)行等等；所以，完全可以借助 npm script，打造屬于自己的高效工作流。愛掏網(wǎng) - it200.com在此腳手架中，默認(rèn)只是些提供了簡單命令，您可以在自己的腳本中，結(jié)合您歡喜的工具，如 gulp、bash 等，來塑造屬于您的高效工作流。愛掏網(wǎng) - it200.com下面對默認(rèn)命令略作說明：

使用此腳手架的線上項目

• 「傾城之鏈｜NICE LINKS」：一個開放平臺，旨在云集全球優(yōu)秀網(wǎng)站，探索互聯(lián)網(wǎng)中更廣闊的世界；在這里，你可以輕松發(fā)現(xiàn)、學(xué)習(xí)、分享更多有用或有趣的事物。愛掏網(wǎng) - it200.com

項目待優(yōu)化的那些方向

• 完善單元測試相關(guān)；在代碼層面，做好單元測試，有助于提升代碼質(zhì)量，從而使得項目質(zhì)量、后續(xù)維護(hù)都可以更好。愛掏網(wǎng) - it200.com考慮將在之后的版本中，參考 Vue Test Utils 對這塊兒進(jìn)行完善。愛掏網(wǎng) - it200.com
• SEO 優(yōu)化相關(guān)；這是多方都應(yīng)該考慮的問題；但在項目設(shè)計層面，可以考慮服務(wù)端渲染來極大提升 SEO；但這對于已經(jīng)處于開發(fā)階段的項目，涉及需要更多的調(diào)整，相比于其他的方案。愛掏網(wǎng) - it200.com「傾城之鏈｜NICE LINKS」 是基于 prerender，在 nginx 層面，針對瀏覽器作預(yù)渲染以優(yōu)化 SEO，現(xiàn)在看起來效果可以。愛掏網(wǎng) - it200.com 另外可以選擇的方案是 Prerender SPA Plugin，在 Webpack 構(gòu)建項目時預(yù)渲染靜態(tài) html 內(nèi)容，；在未來版本中，會考慮針對這塊兒給出一個相對折中的方案。愛掏網(wǎng) - it200.com

寫在最后的結(jié)語

對于分享，您的海量包容和意見建議，是促進(jìn)彼此都能更上一層樓的關(guān)鍵。愛掏網(wǎng) - it200.com輸出文字，總是比寫代碼辛苦的多；在付出多時的敲敲打打之后，希望可以得到您寶貴的意見和建議，使得此腳手架可以更進(jìn)一步，以惠及到更多的人。愛掏網(wǎng) - it200.com最后，推薦您體驗個人最新作品 ～ 「傾城之鏈｜NICE LINKS」： 傾心締造，癡心為你，希望您會喜歡。愛掏網(wǎng) - it200.com

@2024-05-13 于深圳.南山 Last Modify： 2024-05-20

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

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