移除 ModuleConcatenationPlugin 以加快 Angular 建置速度

最近接手一個專案,需要將舊 Angular 9 專案加入之前客戶沒有實作的 lazy loading 功能,專案包含了將近 600 個頁面,之後還會增加。

重構的過程是很順利的,不過在 lazy loading 架構完成後,卻出現了 production build 時間大幅增加的問題,花費了不少時間研究,總算是以較低的代價換回了 build 速度。

這篇文章就來分享一下整個過程和結論。

繼續閱讀
如何在 Azure CloudShell 上傳/下載檔案

Azure CloudShell 可以幫助我們直接在 Azure Portal 上直接下指令進行各種資源的操作,不過偶爾我們需要將地端的檔案上傳到 Azure CloudShell 或是需要將在 Azure CloudShell 上面的檔案下載下來,今天分享一些小技巧,讓我們可以輕鬆的在 Azure CloudShell 上傳/下載檔案。

繼續閱讀
使用 inject() 簡化建構式注入的內容

Angular 14 將加強原有的 inject 功能,讓我們在元件的建構式內可以直接透過呼叫 inject(...) 取得原本所有可以在建構式注入的內容,這種做法可以大幅簡化原來建構式的程式,但也可能帶來一些問題,今天就來看一下神奇的 inject() 新用法。

繼續閱讀
搶先體驗強型別表單(Strict Typed Reactive Forms)

Angular 14 即將推出強型別的 Reactive Forms 表單功能,讓我們在開發過程中可以享受強型別定義帶來的好處,不用再擔心弱型別不小心打錯字等等問題,今天就來看一下如何使用強型別的表單功能!

繼續閱讀
搶先體驗 Standalone Components / Directives / Pipes

Angular 14 預計會推出一個重磅功能 - 「Standalone Components / Directives / Pipes」!這個功能允許我們「獨立」的使用 components、directives 和 pipes,不用再強制依靠 @NgModule

目前 Angular 14 已經推出 RC.0 了,這個版本內也包含了 Standalone 的開發人員預覽版本(developer preview of standalone),讓我們可以搶先體驗一下這種獨立使用元件的版本,這篇文章就來介紹一下為什麼要使用 Standalone 以及該如何使用。

繼續閱讀
[NgRx 速成班] 簡介 NgRx

NgRx 是一個強大,且功能完整的 Angular 狀態管理套件,在我們的應用程式越來越複雜的時候,它很適合用來管理一些全域的狀態,並透過適度的抽象化以及加入一定的規範,降低整體程式的耦合性,打造出更好維護及管理的程式碼。

接下來的一系列文章將會介紹 NgRx 的核心精神,使用方式及相關工具。

繼續閱讀
[node.js] 打造美觀的互動式 CLI 介面

前陣子在 Youtube 上看到了一部影片,介紹了好幾個 node.js 的套件,來幫助我們打造漂亮的 CLI,才後知後覺的發現一直在使用的 Angular CLI、Schematics 等等,許多由 node.js 開發的 CLI 工具,背後那些美觀的畫面都是基於這些套件,而不是自己刻的,所以整理了一下這些套件的介紹與示範!

繼續閱讀
[Angular 進階議題] 減少 moment.js 造成 bundle 檔案過大的問題

momentjs,可以說是最多人使用的老牌 JavaScript 時間處理類別庫;當然,隨著技術的進步,momentjs 也有不少議題被提出,其中最大的問題就是檔案太過龐大了,且隨著現在前端技術的發展,我們經常使用 webpack 等工具將前端程式進行打包,同時過濾 (tree shaking) 要不要的程式,以減少整體檔案大小。

而 momentjs 由於原始設計的關係,在做 tree shaking 的時候會無法移除掉用不到的 API,同時還有龐大的語系檔,嚴重影響最終 bundle 檔案大小。

抱怨歸抱怨,momentjs 還是非常多人在用,因此只能盡量的做到減少大小,至少不要把龐大的語系檔一起 bundle 進來。

Angular 過去是將 webpack 整個封裝起來的,而隨著版本推移,現在也能自訂 webpack 了,今天就來看一下如何在 Angular 中自訂 webpack,同時移除 momentjs 中過大的語系檔。

繼續閱讀
如何將 Word/Excel 等檔案內容貼到網頁上

源自前陣子我們家業務問的問題:「客戶原來的系統能將 Excel 儲存格內容貼到網頁上,我們辦得到嗎?」。

實際上當然是肯定的,但還真的沒有特別嘗試過該如何做到,花了點時間研究發現也沒那麼困難,也把一些種點整理一下,以免以後自己忘記。

繼續閱讀
[Inno Setup] CI 時自動產生安裝檔(以 Azure DevOps 為例)

透過 Inno Setup 打包安裝檔非常方便,由於都是腳本指令,加上 Inno Setup 本身也支援以 CLI 的方式執行,因此要搭配 CI/CD 是完全可行的,本篇就以 Azure DevOps 為例,說明一下使用 Inno Setup 打包安裝檔需要注意的一些事項。

以下為使用 Pipeline as code 的方式說明,因此都是 yaml 設定檔,當然如果使用 Classic editor 的話,也都可以找到對應的 task

繼續閱讀