您必須了解關於 AWS 的 IOPS

假如您持續深入了解 AWS ,您肯定會發現系統層面比您想像的還要複雜。EBS 儲存空間也不例外!

掛載儲存體到一個伺服器或主機看似相對簡單,然後您發現您的應用程式有點慢。不知道到底是什麼原因直到您看到 Stack Overflow 的討論關於 IOPS 和吞吐量(Throughput)的問題。在面對這個問題幾次之後,我決定要研究一下這個問題。

下面是我嘗試理解為什麼 EBS 變成效能瓶頸的原因。

AWS 有 SSD 和傳統的磁盤硬碟,這裡我們說的是 SSD 的部分,如果您不是很確定您使用的,大概多數都是 SSD。

繼續閱讀

Laravel 8 自動產生 Sitemap

Sitemap 是否真的必須?

理論上 Sitemap 協助搜尋引擎的網頁爬蟲發現您網站所有的頁面。Google 文件有詳細說明

如果您網站的頁面都有正確的連結,爬蟲通常可以發現全部的頁面。即便如此,Sitemap 也可以改善網頁抓取尤其是您的網站滿足下拉條件之一時:

  • 您的網站非常大。因此 Google 爬蟲有可能會忽略抓取一些最近更新的頁面
  • 您的網站有大量內容頁面存檔。這些頁面屬於獨立頁面或沒有被妥善連結。如果您的網站本身每個頁面沒有做好參考關聯,您可以將他們列在 Sitemap 上來確保 Google 不會忽略它們。
  • 您的網站是新網站,當下幾乎沒有外部連結。Google Bot 和其他爬蟲是根據某個頁面的連結來找到另一個頁面的。如果外部沒有任何連結,結果就是 Google 可能根本沒有發現您的頁面。
  • 您的網站使用大量媒體內容,顯示在 Google News 或其他網站相容的 Sitemap 註記
繼續閱讀

新世代建置工具解析(esbuild、Snowpack、Vite、wmr)

本文為翻譯自 Comparing the New Generation of Build Tools 一文加上更新補充。因建置工具更新速度關係,如遇部分內容無法實作或不一致請參考各官方文件。

過去的一年出現了一堆新的開發工具,它們緊跟著那些目前佔據前端世界的建置工具例如:webpack,Babel,Rollup,Parcel,create-react-app。

這些新工具的目的並不是實現一模一樣功能,它們各自有不同想嘗試解決的問題或新增的功能。儘管有所不同,但這些工具都有著共同的目標:改善開發者體驗。

具體來說,本文希望試著分析每個新工具,概述它們的功能,以及為什麼我們需要它們和適用的情境。我知道項目之間的比較很難非常公平,再一次強調這裡比較的項目,它們的關係並非直接的競品。實際上例如 Snowpack 底層就有使用 esbuild 來處理某些事情。

本文的目的是更進一步了解這些工具的前景和它們提供什麼功能可以讓我們簡化開發流程。如此一來我們就知道能有什麼選擇,以及它們是如何組成的,然後在需要的時候我們可以做出比較好的決定。

當然這些論述有受到我使用 React 和 Preact 經驗的影響。個人比較熟悉這些函式庫,但我們也會探討對其他前端函式庫的支援和使用。

關於這些新工具網路上有許多不錯的文章,影片,廣播等。推薦 ShopTalk Show Episode 454 探討關於 Vite 以及 Episode 448 Snowpack 和 wmr 作者的介紹。從這些影片介紹我們知道這些工具如何加速優化了我們的開發工作。

繼續閱讀

React DnD 入門

[toc]

React DnD 是 React 一系列的單元功能,用來協助您建置介面上複雜的拖拉功能同時維持元件解耦。特別適合像是 Trello 類型的應用程式利用拖拉來轉移資料,並依據拖拉事件變更的狀態改變元件的外觀。

安裝

1
$ npm i react-dnd react-dnd-html5-backend
繼續閱讀

正確使用 Laravel Eloquent

自 Laravel 5.3 之後,看到過許多專案的 Eloquent 關聯與查詢都不是使用相對有效率的用法。這些情況之所以存在是因為有不同的方法可以取得同一個資料集,而且多數看起來非常像。除非您非常了解底層做了什麼,不然判斷哪個方法比較好也不是那麼容易。

繼續閱讀

使用 Sancutm 實作 React SPA 認證

Sanctum 是一套輕量化的 API 認證機制套件。本文會介紹如何使用 Sanctum 支援 React 單頁應用程式認證(會員登入)。我們假設應用程式的前端和後端使用相同 TLD 頂級網域下的子網域,如此才可以使用 Sanctum 基於 Cookie 的驗證流程。利用這種作法可以省去處理 API Token 。為此我們使用 Homestead 設定兩個網域 api.sanctum.test 指向 Laravel 專案的 public 目錄用於提供後端,sanctum.test 指向另一個目錄提供前端的部分。

繼續閱讀

[譯] 詳解 React 渲染

原文出處

本文主旨於介紹 React 渲染的行為,包含使用 Context 和 React-Redux 之後的渲染行為。

我已經見了太多關於渲染的問題並且這些問題仍然持續出現 - 什麼時候,為什麼 React 會重新渲染元件,如果使用了 Context 或 React-Redux 會如何影響重新渲染的範圍和觸發的時機。經歷了多次的解釋,似乎有這個必要將這些回答彙整成一個較完整的介紹。

注意:這些資訊網路上都已經有了,而且很多人都解釋過了,但人們似乎還是蠻困擾因為資訊散落而不容易有個比較完整的了解,所以這篇文章試著將這些問題整理說明清楚,希望能對您有些幫助。

繼續閱讀

手把手實戰部署 ReactJS 至 Amazon S3

本文嘗試盡可能實作最佳實踐,但部分設定請依據自身需求調整。

大綱

  • 建立一個簡易的 React 應用程式
  • 設定 S3 提供靜態網站託管
  • 部署
  • 進階實戰 - SSL 搭配自訂網域
  • 進階實戰 - S3
  • 進階實戰 - CloudFront
  • 進階實戰 - 自動化腳本
繼續閱讀