前言
說起多頁面項目架構(gòu)盟步，大家應(yīng)該不會陌生休玩。我們既希望它能夠多容納多個單獨的Web頁面，又希望它們能夠共用一些工程化配置（例如圖片處理片择，語法檢查等）潜的。利用 webpack 搭建的多頁面項目已經(jīng)成為了前端小白的標配。千千萬萬個面試者的 github 倉庫里面都有 webpack 的多頁面項目腳手架字管，從這里可以看出它在Web前端的重要性啰挪。
但是，webpack多頁面項目架構(gòu)存在著一些難以忍受的缺點纤掸。
- 當項目中頁面很多脐供，項目的熱加載速度會受到影響，bundle需要大范圍重新計算借跪。這時候最有效的解決方案就是頁面限制入口政己，但是這種方法給開發(fā)者帶來心智負擔(dān)，并非最好的解決方案掏愁。
- 多頁面項目只能支持一種前端框架歇由，它沒法同時支持多種框架（react/vue/svelte/vanilla.js等）。例如果港，一些簡單的頁面（中轉(zhuǎn)頁面等）首選技術(shù)棧是vanilla.js（原生Javascript） 沦泌，但是由于多頁面框架的限制，被迫引入了react辛掠。
大部分多頁面項目架構(gòu)是為了滿足這類碎片化頁面的開發(fā)（介紹頁和活動頁）谢谦。其訴求是：
- 技術(shù)棧通用化，能支持多種不同的前端框架
- 具有極致的調(diào)試效率萝衩，支持hot reload
- 傻瓜式保姆式地初始化文件回挽、壓縮和注入引用
什么是quickpage
quickpage是一個開源前端工具，正是為了解決以上問題猩谊，它的命名含義在于快速滿足頁面的開發(fā)和構(gòu)建千劈。
隨著 bundleless 的發(fā)展，大家對開發(fā)效率牌捷、打包體積墙牌，打包效率有了更高的要求涡驮。《ESM Import與Bundleless》一文介紹了前端工程化的未來發(fā)展方向。所以在技術(shù)選型上喜滨，考慮到開發(fā)效率捉捅、頁面的獨立性以及 bundleless 前端工程化，項目首先選用 vite 來作為底層的基礎(chǔ)鸿市，它能夠支持 vue锯梁，react即碗，svelte 等主流框架或是 vanilla.js 無框架寫法焰情，它有著非常好的構(gòu)建基礎(chǔ)以及周邊生態(tài)體系。
在 vite 的基礎(chǔ)上剥懒，quickpage 提供了以下額外能力内舟，達到“開箱即用”的效果。
- 初始化項目
- 目錄結(jié)構(gòu)的約束
- 友好的交互命令行
- 按需開發(fā)
- 按需構(gòu)建
項目的初始化有兩種方式初橘。一種是通過 npm 官方方式來初始化項目（如下方命令）验游，工具會自動幫你創(chuàng)建一個vallina.js demo項目，你可以直接修改該頁面保檐，或者重新創(chuàng)建子頁面耕蝉。
npm init quickpage your-project
另一種則是相對高自由度的方式，直接創(chuàng)建一個文件夾夜只，安裝最新版本的vite和quickpage-cli垒在，通過命令行創(chuàng)建子頁面，也能達到同樣的效果扔亥。
mkdir your-project && cd your-project
npm i vite quickpage-cli --save-dev
目錄結(jié)構(gòu)是以 pages 文件夾作為多頁面項目的基礎(chǔ)场躯，每個單獨的子頁面項目則是它的子文件夾，所有的子頁面都平鋪在該文件夾旅挤。這么一來踢关，我們能夠清楚了解項目中包含多少個子頁面。項目中有一個vite.config.js用于配置前端工程粘茄，所有的配置都會直接作用到該項目當中签舞，充分且毫無保留地利用了 vite 的所有能力，也確保了 quickpage 和 vite 的獨立性柒瓣。
創(chuàng)建一個子頁面是多頁面項目的基本操作儒搭。quickpage 與其他多頁面框架不同，去除了所有復(fù)雜的配置嘹朗，開發(fā)者只需要利用quickpage create命令創(chuàng)建子頁面师妙，根據(jù)交互式命令輸入頁面名字和頁面框架類型（例如react）即可。它將會自動幫你創(chuàng)建一個單獨的目錄屹培，每個子頁面都可以擁有獨立的技術(shù)棧默穴，復(fù)雜的頁面可以選擇 react怔檩，簡單的頁面可以選擇 svelte。
按需開發(fā)蓄诽，也可以理解為局部開發(fā)薛训。以往的開發(fā)經(jīng)驗告訴我們，涉及到修改的頁面往往只是其中一小部分仑氛，大家都習(xí)慣了“小步快走”的迭代節(jié)奏乙埃。開發(fā)者可以利用quickpage dev選擇性地調(diào)試部分頁面，每個頁面靈活可控锯岖。如果項目中頁面太多介袜，命令行還提供了模糊搜索的能力。
按需構(gòu)建出吹，也可以理解為局部構(gòu)建遇伞。根據(jù)我們的需求范圍，利用quickpage build這個命令捶牢，選擇性地構(gòu)建部分頁面鸠珠，避免需求不涉及的頁面被重復(fù)構(gòu)建，再將這些頁面以最小的獨立單元進行部署秋麸，降低上線的風(fēng)險渐排。
橫向?qū)Ρ?/h2>
和webpack多頁面的對比
webpack 多頁面是基于多入口的實現(xiàn)，由于在開發(fā)調(diào)試的時候灸蟆，所有入口都會重新計算 bundle驯耻，所以隨著項目頁面逐漸變多，調(diào)試效率會大幅下降次乓。
quickpage 的開發(fā)模式是基于 vite 吓歇，所以在調(diào)試過程中，它充分利用了bundleless 的優(yōu)勢票腰，有效減少了構(gòu)建的計算城看，只是做了簡單的轉(zhuǎn)譯。而且 quickpage 可以按需開發(fā)以及按需構(gòu)建杏慰，確保了涉及頁面數(shù)量的最小化测柠。
和vite官方多頁面的對比
vite 官方也支持多頁面，具體參考vite多頁面應(yīng)用模式缘滥，它的調(diào)試效率固然不是問題轰胁。
quickpage 與它的不同點在于目錄結(jié)構(gòu)約束以及按需構(gòu)建。正是由于固定的目錄結(jié)構(gòu)朝扼，我們能夠清楚知道項目里面有多少個頁面赃阀，哪些頁面可以被開發(fā)或者構(gòu)建。雖然它們共用一份配置擎颖，但是我們能夠選擇性地構(gòu)建頁面榛斯，并執(zhí)行增量式的部署观游。
總結(jié)
針對現(xiàn)實前端工程場景中碎片化頁面，quickpage 應(yīng)該算是一個靈活可控的多頁面小工具驮俗，解決大家倉庫碎片化和工程配置沒法統(tǒng)一的問題懂缕，很好地支持它們的開發(fā)和構(gòu)建等工作。歡迎大家查看源碼王凑，有問題可以提issue搪柑。
