達標好文 技術 [Day 30] Tips for Lazy Loading Images

Lazy loading 是廣為人知的網頁優化技巧，尤其應用在圖片上時能夠大幅減少效能和流量的浪費，目前也有許多圖片 Lazy loading 的套件可以使用，...

技術 Day 26 - 圖片優化：next/image

根據 Web Almanac 2022 年的統計，網頁的圖片大小佔整體網頁檔案大小，中位數超過 6 成。而 JavaScipt 則佔近 3 成。(圖片來源：ht...

技術 React.js 職場實戰！圖片 Lazy Loading

一天的開始 你是新創公司 Imager 底下的前端工程師，Imager 提供的服務非常簡單，就是能在網頁瀏覽各式各樣的圖片，網頁已經上線並正常的運作中，我們來...

技術 第 13 天 長痛不如短痛！整理專案｜feature module、shared module

前情提要 完成了新增英雄頁面、英雄資訊元件後，在我們勸誘青銅五小強之前，讓我們先停一停，來重構整個專案。 我們將完成下列事項： 建立 Feature Modu...

技術 Day 27 - JavaScript 載入優化：next/dynamic

昨天有提到，根據統計，圖片和 JavaScript 為整體網頁檔案大小佔比的前兩名，兩者加起來佔了近九成。 認識 Next 針對圖片優化推出的 componen...

技術 探討路由模組載入策略

前言 大型網站應用程式專案由於功能較多，如果一開始就把全部的頁面或功能模組引入根模組，使用者體驗會因為初次進入畫面時間過久而降低，為了解決這個問題，延遲載入模組...

技術 Day 10 : Lazy Loading 優化 React 大文件加載

在應用規模增長的過程中，性能優化始終是前端工程師需要解決的重要課題。上篇文章中，我們討論了如何使用自訂日誌系統來提升應用效率。而今天，我們將進一步探討通過 La...