KD's Tech Blog

軟體工程和產品專案管理現場，紀錄關於軟體開發/程式設計/工程思維的技術筆記

React 效能優化入門教學筆記 | 學習筆記

前言隨著前端應用日益龐大，單頁應用（SPA）在初次載入時常面臨 JavaScript 檔案過大、載入時間過久的問題，導致使用者等待時間過長、效能下降。為了解決這個問題，React 與現代建構工具（如 Webpack、Vite）提供了 Code Splitting（程式碼分割）與 Lazy Loading（延遲載入）兩種策略，協助開發者更有效地管理與優化應用程式的載入流程。 程式碼分割（Cod......

Posted by kdchang on 2024-12-26

React 效能優化入門教學筆記 | 學習筆記

前言React 作為現代前端開發的主流函式庫之一，強調 UI 的組件化與狀態驅動式渲染。然而，隨著應用規模擴大與資料變得動態頻繁，React 應用可能出現重新渲染過多、載入過慢或記憶體占用過高等問題，影響使用者體驗與開發效率。為此，瞭解與掌握 React 的效能優化技巧，成為中高階開發者的重要功課。 本篇筆記將介紹 React 效能優化的核心原則與常見實作方式，搭配簡單的程式碼範例說明實際操......

Posted by kdchang on 2024-12-25

React 效能優化 SOP 檢核清單入門教學筆記 | 學習筆記

前言在大型單頁應用（SPA）與複雜互動式介面中，效能瓶頸常常來自不必要的重新渲染、大型 bundle 導致的載入緩慢，以及過度操作 DOM 所造成的卡頓。建立一份標準化的「效能優化檢核清單」（SOP，Standard Operating Procedure），能夠在開發流程中明確指出應檢查的重點、落實最佳實踐，並透過持續監控與回饋，進一步強化團隊的效能意識與程式品質。 本篇筆記將依照從「程式......

Posted by kdchang on 2024-12-24

Lodash 介紹與入門教學筆記 | 學習筆記

前言在 JavaScript 的開發中，資料處理與函式操作經常需要處理陣列、物件、字串的轉換、搜尋與過濾等需求。儘管 ES6+ 提供了不少內建函式（如 map、filter、reduce 等），但仍有許多情境需要進階或更簡潔的處理方式。 這時候，Lodash 就是一個非常實用的工具庫。它是一個提供大量實用函式的 JavaScript 函式庫，能幫助開發者更方便地進行資料操作、提升開發效率與可......

Posted by kdchang on 2024-07-01

Tree Shaking 介紹與入門教學筆記 | 學習筆記

前言在現代前端開發中，專案的程式碼結構越來越複雜，為了提高效能與使用者體驗，減少最終打包後的 JavaScript 檔案大小成為一項重要任務。這時，「Tree Shaking」技術便扮演了關鍵角色。 Tree Shaking 是一種靜態程式碼分析技術，能夠在打包階段分析模組之間的依賴關係，移除未被實際使用的程式碼（dead code）。這不僅能優化網站載入速度，也讓程式碼更精簡、維護性更高。......

Posted by kdchang on 2024-07-01

Jest 使用 ES Module 入門教學筆記 | 學習筆記

前言在 JavaScript 開發中，ES Modules (ESM) 已成為標準。從 Node.js 12 開始，ESM 已獲得原生支援，而前端開發（如 React、Vue、Svelte 等框架）早已全面採用 ES Module。然而，當我們使用 Jest 來撰寫與執行測試時，若要直接使用 ES Module，會遇到一些設定上的挑戰。本篇筆記將說明如何在專案中讓 Jest 正確執行 ES ......

Posted by kdchang on 2018-02-01

Jest AAA 測試原則入門教學筆記 | 學習筆記

範例測試：saveMoney 方法atm.js： class ATM { constructor(balance) { this.balance = balance; } saveMoney(amount) { if (amount <= 0) { throw new Error('Amount m......

Posted by kdchang on 2018-02-01

Google Lighthouse 介紹與入門教學筆記 | 學習筆記

一、什麼是 Lighthouse？Google Lighthouse 是 Google 開發的開源自動化工具，主要用來評估網頁的品質，包含 效能 (Performance)、無障礙 (Accessibility)、最佳化 (Best Practices)、SEO、漸進式網頁應用 (PWA) 等五大面向。透過 Lighthouse，開發者可以快速找到網站問題與優化建議，幫助網站在使用者體驗與搜......

Posted by kdchang on 2018-02-01

Progressive Web App（PWA）入門教學筆記 | 學習筆記

一、前言在行動裝置普及的今天，使用者越來越期待 Web 應用程式能提供與原生 App 相近的使用體驗。然而，傳統 Web 應用程式在離線支援、效能與通知推送等方面仍有所不足。為了彌補這些缺點，Progressive Web App（PWA） 應運而生。 PWA 結合了 Web 技術與原生 App 的優勢，使網站具備離線可用、快速載入、可安裝、推播通知等功能，進而提升使用者體驗與互動黏著度。對......

Posted by kdchang on 2018-02-01

ABOUT ME
KD's Tech Blog 技術部落格 | KD Chang 張凱迪

KD Chang 張凱迪（@kdchang），台灣大學，主修經濟學，臺大資管所畢業。是一個軟體工程師，也是一位 PM 產品專案經理和教育工作者。曾服務過上市網路軟體公司、上市科技電子公司、台灣 AI 人工智慧新創獨角獸公司，也曾參與數個新創組織的創辦和多個網路產品服務的開發。A Software Engineer, Product/Project Manager & Educator.:)

FRIENDS