我司現在使用vue3做為新專案的框架，設計了如下的目錄：
|--src
|-- assets/
|-- boot/
|-- components/
|-- config/
|-- lib/
|-- projects/
|-- flight/
|-- promotion/
|-- member/
|-- login/
|-- router/
|-- store
|-- main.js
生產環境剛開始使用 vite 預設的打包邏輯，它有一些問題：
所以我動手改造了下打包過程，具體思路如下：
src 資料夾下的內容打包成 common
這解決開頭提到的幾個問題，順便還提了乙個 rollup 的 bug issue。
但隨著對專案的深入理解，我看到了一些有意思的情況。
首先，projects 下的專案彼此間並無太多交集，甚至可以看著是乙個個獨立的專案，但它們組成了乙個大型單頁應用（spa）。所以，每次打包的時候，都得全量構建一次。可以預見的是，隨著**量的增加，生產環境的打包時間會越拉越長。
其次，雖然我們多數時候只會訪問幾個頁面，但卻不得不載入一堆不相關的依賴。這減緩了首屏的渲染時間，影響使用者體驗。
第一步：生成公共服務包
公共服務包應具有哪些內容？乙個原則——內容公用、介面穩定。
具體到我們專案，應包含 vue、vuex、vue-router 原始碼及相關配置，請求（request）、登入註冊（auth）、支付（payment）、全域性元件等。將它們打包成乙個檔案，假設叫 common-service-[hash].js，此檔案匯出公共介面，通過外鏈（)的方式，供他專案使用。
第二步：每個專案單獨構建
每個子專案獨立開發、構建，最終發布到同乙個靜態伺服器中。
第三步：路由跳轉中載入依賴檔案
雖然每個子專案相對獨立，但我們依然想要獲得單頁應用的使用體驗。那麼就需要在路由跳轉前，把對應的專案依賴載入完畢後，再使用 vue-router 進行跳轉。
軟體開發沒有銀彈。新架構至少存在以下問題。
公共服務包中資料變更，如何全量通知子應用，且不影響子應用的快取
我們通過 script 標籤在 .html 中引入公共服務包。所以當公共服務包發生變更，只需替換所有 .html 檔案中的內容，然後上傳到伺服器對應的目錄。
子專案內容存在冗餘
冗餘是肯定有的，但可以根據具體場景優化
子專案如何通訊
vuex
如何絲滑的載入子應用依賴
可以通過應用的 manifest.json 獲取初始依賴，但這至少會增加一次網路請求。
構建過程變得非常複雜
軟體複雜度不會消失，只會轉移。
問題是，這值得麼？
webapp專案開發歷程
一 開發概要 在手機頁面上點選每一橫行的cell，點入到對應的操作頁面 分別可以顯示使用者手機裡面的photos,video,txt 展示個人的使用者資料 方法 document.addeventlistener deviceready ondeviceready,false function on...
webapp專案前端總結
我負責前端頁面和邏輯，node是另乙個同事負責，前端架構由前端組長負責。前端框架選型是開發前很重要的準備 1.ui框架 考慮過uikit amazeui bootstrap，最終選擇bootstrap 自定義樣式，主要原因公司其他專案也用的bootstrap。對我來說這三個框架我之前都沒用過，作為乙...
Vue2開發的讀書WebAPP
vue2 vuex vue router webpack es6 axios sass git clone cd readmore npm install npm run dev 本地執行 訪問 http localhost 8080 npm run 每個子元件載入完後是同 this.emit 通知...