歲末年終，一起來幫你家 D3 瘦身吧！
閱讀時間約 7 分鐘
最近某專案弄完上線之後，因為想要加快 First Meaningful Paint 的速度，開始調查有沒有甚麼可以改進的地方。
看著看著就看到博大精深(超大包)的 D3
其實也不過就是 gzip 後 74.7KB 嘛…
本文的終極目標就是希望針對自己的需求，能夠幫 D3 瘦身一下。
不想再聽到瀏覽器的悲鳴了！
D3 為何大包
是這樣的，其實 D3 是一個包羅萬象的超強 library，不能單純的把它定位成「一個畫圖的 library」。
官方介紹如下：
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
如果你也實際用過 D3，就會瞭解 D3 的強大之處在於它對 資料數據 -> 圖像數字 的處裡非常有一套，我這邊也不說太多，如果想深入一點瞭解 D3，可以參考幾乎每年都有人寫的鐵人賽系列文章：
我是不太推薦完整閱讀「Reac / Vue + D3」的這類型的系列。以想學 D3 的角度來看，介紹 React / Vue 的部分感覺沒什麼卵用，想要讀的話，可以只看其中 D3 的部分就好囉！
而 D3 本身其實被切分為非常多的 package，依據使用情況的不同，會用上不同 package 的功能，一樣推薦一個非常優質的 D3 教學網頁：
好的，簡單來說就是如果你照官網寫的起手式
就會把上面 gif 裡面所有的 package 全部載入網頁裡，這樣做會影響我們 FMP 的點有兩個：
- 因為比較大包，需要額外的下載時間
- 因為比較大包，瀏覽器載入這段 code 會花比較多時間
那麼接下來就來幫它瘦身吧！
瘦身123
首先，這次的專案本身是一個 Gatsby 網站，也就是說我們有強力的 webpack bundler 做後盾。
我們可以透過 webpack 包出一個只有我們需要的功能的 D3 object。
首先需要檢視我們到底用了哪些 D3 的 package 裡的功能，先看一眼網站內的效果：
用到的 package 如下：
- d3-selection 基本選取操作工具，這是必備的
- d3-transition 看到動畫表示有用到
- d3-ease 看到比較炫砲的動畫表示有用到
用到特殊 timing function 的 transition 總是會炫砲一點 - d3-interpolate 看到比較炫砲的動畫表示有用到
有嘗試自訂 interpolation 表示對動畫比較有追求，通常也會呈現比較炫砲的效果 - d3-shape 看到複雜 SVG 圖形表示有用到
複雜 SVG 圖形指的是像圓餅圖的切片這種需要用 <path> 才畫得出來的
當然，純看效果是沒有辦法 100% 兜出需要的 package 的，畢竟最懂用了什麼的人是寫這段 code 的我，所以上面這種純推論的伎倆其實是瞎掰的。
我是看 code 來找出用了哪一些 package 的，欸嘿 థ౪థ
心法
一眼看出使用什麼 package 的大原則就是
舉例來說，我們看一下這段 code (可以不用嘗試理解它，隨便看看)：
套用大原則，可以用 d3.xxx() 對應出 package：
- d3.select -> d3-select
- d3.pie -> d3-shape
- d3.entries -> d3-collection
- d3.arc -> d3-shape
然而事情往往沒有這麼簡單，D3 鏈式操作的特性，使得其實有些 package 幾乎沒有用到 d3.xxx() 這種形式的呼叫，而是針對特定的物件(通常是 selection)做 prototype 的擴充。
像 D3 API Reference#d3-transition 就是一個很好的例子：
實際使用的時候大都是：
此時，儘管沒有用到 d3.xxx() 類的呼叫，還是需要記得打包要算上 d3-transition 。
場外加映一下 d3-transition 裡面是怎麼寫的：
經過一番嚴謹的判斷，我把有用到的部分重新 export 成一個 d3：
最後再把原本從 global 抓的 d3 換成 import 這個自己打包的版本就好啦！
修羅場
只是打包完畢並不能夠滿足我們旺盛的好奇心。
跟應有盡有的版本相比，到底變小了多少呢！？
讓我們親手來比較看看吧！
D3 的 d3/d3 repository 就是官方版打包用的 repository，話不多說，馬上 fork 一個來打包。
Fork 之後，小修改一下，在官方完整版之外加入我們的 custom 版本：
- 新增 custom.js 作為 custom build 的進入點
- 新增一個 rollup-custom.config.js 官方版是用 rollup 打包，比較適合打包 library
- 修改 npm script 的 pretest，加入執行我們這個新的 rollup config
最後執行
然後我們就可以在 dist 資料夾裡面看到成果(方便視覺上比較，我把 *.node.js 砍了)：
同時也來比較一下實際載入花的時間：
總結比較結果：
- 檔案大小差距 242KB vs 50KB -> 瘦身後，大小減少了約 80%
- 執行時間差距 58ms vs 16ms -> 瘦身後，載入 library 時間減少了約 72%
後記
是說最近我打算把方格子也加入我發表文章的平台。
畢竟我不喜歡大家一股腦往 Medium 發中文文章的模樣，如果不做點什麼來表現我堅定的立場，好像說不太過去。
這篇就是第一篇同步在方格子跟我的 blog 上架的文章。
考慮到方格子的向性，我也打算順便寫一些別的有的沒的(?)，拓展一下寫文的觸角，看看有沒有什麼新的火花。最近看了紫羅蘭永恆花園之後，深刻感受到文字的力量之大，同時也覺得沒辦法好好運用文字的自己有點可悲 😢
稍微總結一下在方格子上的計畫：
- 與 https://pymaster.tw 同步發文
- 除了前端專題，可能會再開一個動畫心得專題
- 提高產文頻率，希望一週兩篇以上前端專題，動畫心得的話就看心情囉
希望往後我的文字能夠更加隨心所欲、Sincerely！
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
有陽光的週末，怎不讓人著迷而放鬆？
忙亂的一週，除了既定的會議，一場不照劇本的忘年會，一頓意外的晚餐之外，幾乎很多時間都被 Clubhouse 佔領。除了網路上的同溫轟炸，就連線下溝通的話題也有點繞不開。
昨天還有個 session 專門討論著「中毒」這種現象，睡前開始一路聊到醒來打開居然還在聊，所
歲末年終之際總是要做點什麼感覺有除舊佈新的儀式感；題外話，我挺喜歡「儀式感」這幾個字，這是一種生活態度，因為重視某件事情所以會做點什麼讓某個時刻有點不同。所以，對我而言，我以「開始寫作」做為結束2020迎接2021的一個儀式。
連續看了三年博客來與誠品的年終報告，今年又會帶來什麼感想呢？單看榜單是不夠的，始終要輔以兩家後台整理出的獨家數據分析。透過公開的簡報，可以看出當年的大概趨勢以及關鍵字。
你可能從沒想過父母會離開我們，如果那天真的不幸到來你能接受嗎？一起來欣賞，讓我們身歷其境，一起體悟人生的重大課題吧！這部電影把每個人物寫得很貼切，鄉下的地方喪禮習俗可能跟我們都市人又有些差異，電影的細節也是點到人心，電影內容完整的演出親人離開的不捨，也用了倒敘法，回顧了女主角跟父親的往事點點滴滴……
黃鴻升，英文名字Alien Huang(alien當名詞使用時有兩個意思，一是住在他國的外國人，二是外星人)，1983-2020，外號小鬼，台灣男藝人，歌手，演員，主持人，作家，藝術家，家在台北北投，近年至少兩次入圍電視金鐘獎。老實說我不大看台灣電視，並不清楚他的模樣，但小鬼這名號倒是響叮噹我知道。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
有陽光的週末，怎不讓人著迷而放鬆？
忙亂的一週，除了既定的會議，一場不照劇本的忘年會，一頓意外的晚餐之外，幾乎很多時間都被 Clubhouse 佔領。除了網路上的同溫轟炸，就連線下溝通的話題也有點繞不開。
昨天還有個 session 專門討論著「中毒」這種現象，睡前開始一路聊到醒來打開居然還在聊，所
歲末年終之際總是要做點什麼感覺有除舊佈新的儀式感；題外話，我挺喜歡「儀式感」這幾個字，這是一種生活態度，因為重視某件事情所以會做點什麼讓某個時刻有點不同。所以，對我而言，我以「開始寫作」做為結束2020迎接2021的一個儀式。
連續看了三年博客來與誠品的年終報告，今年又會帶來什麼感想呢？單看榜單是不夠的，始終要輔以兩家後台整理出的獨家數據分析。透過公開的簡報，可以看出當年的大概趨勢以及關鍵字。
你可能從沒想過父母會離開我們，如果那天真的不幸到來你能接受嗎？一起來欣賞，讓我們身歷其境，一起體悟人生的重大課題吧！這部電影把每個人物寫得很貼切，鄉下的地方喪禮習俗可能跟我們都市人又有些差異，電影的細節也是點到人心，電影內容完整的演出親人離開的不捨，也用了倒敘法，回顧了女主角跟父親的往事點點滴滴……
黃鴻升，英文名字Alien Huang(alien當名詞使用時有兩個意思，一是住在他國的外國人，二是外星人)，1983-2020，外號小鬼，台灣男藝人，歌手，演員，主持人，作家，藝術家，家在台北北投，近年至少兩次入圍電視金鐘獎。老實說我不大看台灣電視，並不清楚他的模樣，但小鬼這名號倒是響叮噹我知道。