Angular HardLink 解決--prod 壓縮打包報錯的問題

在開發Angular專案的時候,由於前端已經轉換為MVC的框架,因此每一個Component都是獨立的

也因如此,所以檔案數量不僅多也肥大。

筆者這陣子在開發一個ERP系統,目前專案就已經將近30M了(不包含WebApi)

也就是說,用戶在使用系統的時候,以不考慮連線問題、後端處理等等

單獨下載檔案就需要下載近30M。

因此對於用戶體驗來說非常不好。

雖然說我們可以透過LazyLoading來解決這個問題,但是不管怎麼樣,一開始肯定是要將部分專案下載下來

更別說如果都沒有切Module,那肯定是很可怕的

也因如此。所以我們需要透過prod這個指令來將檔案進行壓縮

順帶一提,現在目前Angular cli的版本,已經將 --aot 也整合到--prod當中

以往我們如果不將專案先進行編譯,那在讀取的時候就會造成緩慢

因此我們會這樣下指令ng --prod --aot

不過現在直接下ng --prod 就可以囉!

言歸正傳,我們今天是來討論關於壓縮打包會報錯的問題

筆者手上的專案比較特別一點,由於為了將前後端能夠一致,並且同時進行版控

因此在設定上將專案內的src 設定為 HardLink

也就是說src 其實是一個捷徑,點進去後會切換到某一個資料夾底下,而這個資料夾才是真正開發專案內的程式碼

但是在這樣的設定下,使用 ng --prod 會產生以下錯誤

至於該怎麼解決呢?

再參考了這篇 issue 之後,發現到我們需要到

suppress-entry-chunks-webpack-plugin.js 這隻檔案當中的第40行去改寫程式碼。

詳細的檔案路徑在錯誤訊息都有,可以自行前往。

接著我們需要將原有的程式碼替換為以下的程式碼:

// 原來的程式碼
const filterFn = (tag) => !(tag.tagName === 'script' && tag.attributes.src.match(/\.css$/));

// 替換為以下程式碼
const filterFn =(tag)=>!(tag.tagName ==='script'&& tag .attributes.src && tag.attributes.src.match(/\.css$/)); 
               

如此一來再次執行 ng --prod 就不會再看到煩人的 Error囉!

以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教:)

有任何家教、案子 或技術相關問題 請都歡迎聯繫我

http://www.zhenghui.idv.tw/