© 2025. All rights reserved.

SVG Sprites

20 Aug 2018

小圖示的顯示和壓縮技術的演進從 .png、.jpg 或 .gif 圖檔、Image Sprites，到 Base64、Icon Fonts 再來到 SVG 與 SVG Sprites，來看看到底 SVG Sprites 哪裡好 (✪ω✪) 本文前半段著重在產生 SVG Sprites 的方法和如何使用 SVG Symbols 定位；後半段說明各種 SVG Icon 的使用方式和優缺比較。

SVG 圖片最佳化效能調校加載效能 Image Optimization

CSS Modules：babel-plugin-react-css-modules 小記

14 Aug 2018

樣式管理一直是前端工程師的痛點（很煩 (╯‵□′)╯︵┴─┴），因此 CSS 的模組化方法從過去的 OOCSS、SMACSS，到近代的 BEM，還有最近的 CSS Modules 與 CSS in JS，企圖讓程式碼簡潔易懂、可重用，進而有效率地開發和維護。這裡記錄我的玩具「吃什麼，どっち」使用 CSS Modules 之 babel-plugin-react-css-modules 的實作過程。

CSS Modules CSS in JS styled-components babel react.js

PostCSS

10 Aug 2018

PostCSS 是一個使用 JavaScript 轉換 CSS 的工具，它可以做的事情很多，像是加入各家瀏覽器的前綴詞（prefix）、將先進的功能轉為目前主流瀏覽器所能支援的語法、語法檢查和報錯、支援 Grid System、使用類似 SASS 的功能等。

PostCSS css webpack

Preload vs Prefetch

31 Jul 2018

比較 Preload 與 Prefetch 的異同。

Resource Hints 效能調校加載效能圖片最佳化 HTTP Caching

圖片最佳化（Image Optimization）

30 Jul 2018

實作「圖片最佳化（Image Optimization）」的第一個問題是「真的需要這個圖檔嗎？」，去除不需要的圖檔即可減少 HTTP Request。第二個問題才是「若圖檔不能去除或被取代，可以做哪些優化？」。

圖片最佳化效能調校加載效能 SVG Resource Hints

HTTP Caching

27 Jul 2018

HTTP Caching。

HTTP Caching ETag 快取效能調校加載效能

Base64 Images

26 Jul 2018

將圖片轉為編碼字串，讓開發者能將圖檔嵌入 HTML、CSS 或 JavaScript 程式碼，以減少 HTTP Request。適合較少更新的小圖，例如 icon 等。

Base64 Images 效能調校加載效能 Loading Performance 圖片最佳化

≪較新文章較舊文章≫