歲末年終，一起來幫你家 D3 瘦身吧！
最近某專案弄完上線之後，因為想要加快 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 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
Inpaint-web 免費開源的 AI 圖像擦除與放大工具，在用戶端瀏覽器載入模型，處理過程都在本機裝置上執行。完全免費，無須註冊也沒有限制次數，簡單塗抹標記即可擦除該區域的影像，輸出圖片會保留原來尺寸，還可將圖片解析度放大四倍。
Pic Smaller（圖小小）是一個開源的線上圖片壓縮工具，支援 JPG、JPEG、PNG、WEBP、GIF、SVG、AVIF 等格式，能夠快速批量處理多張圖片，沒有限制容量與大小，完全免費，介面簡潔且沒有廣告。
圖片大小
漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具
隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的
※ Javascript和HTML的關係
當我們輸入新的網址或按下重新整理時，從解析檔案到畫面顯示出來，瀏覽器會進行以下流程：
解析 HTML / CSS 檔案，建立物件模型：
HTML → DOM (Document Object Model)。
CSS → CSSOM (CSS Obje
這篇文章精選了三款必備的AI繪圖工具，包括MidJourney、DALL·E和Stable Diffusion。這些工具提供了豐富的創作可能性，讓使用者能夠輕鬆地以AI技術創作各種繪畫作品。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
Inpaint-web 免費開源的 AI 圖像擦除與放大工具，在用戶端瀏覽器載入模型，處理過程都在本機裝置上執行。完全免費，無須註冊也沒有限制次數，簡單塗抹標記即可擦除該區域的影像，輸出圖片會保留原來尺寸，還可將圖片解析度放大四倍。
Pic Smaller（圖小小）是一個開源的線上圖片壓縮工具，支援 JPG、JPEG、PNG、WEBP、GIF、SVG、AVIF 等格式，能夠快速批量處理多張圖片，沒有限制容量與大小，完全免費，介面簡潔且沒有廣告。
圖片大小
漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具
隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的
※ Javascript和HTML的關係
當我們輸入新的網址或按下重新整理時，從解析檔案到畫面顯示出來，瀏覽器會進行以下流程：
解析 HTML / CSS 檔案，建立物件模型：
HTML → DOM (Document Object Model)。
CSS → CSSOM (CSS Obje
這篇文章精選了三款必備的AI繪圖工具，包括MidJourney、DALL·E和Stable Diffusion。這些工具提供了豐富的創作可能性，讓使用者能夠輕鬆地以AI技術創作各種繪畫作品。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者