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

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

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

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

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

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

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

Webpack 是強大的前端打包工具，可以幫助我們快速的將前端 JavaScript 程式及其用到的相關程式都打包成一個或數個 js 檔。同時也可以將不需要的程式透過 tree shaking 機制過濾掉。

不過在前端的世界對於檔案大小是錙銖必較的，因此知道 webpack 到底打包了哪些程式，哪些程式是過濾不掉的，就非常重要了！

好在 Webpack 提供了一個功能，讓我們能快速分析出打包的結果，到底包進哪些程式，程式大小等等清清楚楚，今天就來看看如何分析Webpack 打包後的結果。