Gogolook 動物園⾃動化測試藴育之旅

- 尤俊凱 Eric Yu

https://martinfowler.com/bliki/TestPyramid.html

cssdiner.com

http://www.jianshu.com/p/0fc9fc5f42e9

Progressive Web Apps & Web Performance

- 吳俊賢 Henry Wu

Web Performance (F2E)

• HTTP Caching
• Render Blocking
• Code Splitting
• Precache
• HTTP/2
• React

HTTP CACHING

加速第一次訪問

盡所有可能，不讓非必要的東西阻擾網頁

Render Blocking

• <Link />
• <Script />

現實

• ⼀⼤包檔案，async、defer 根本⽤不到
• 裝置不給力？

Code Splitting

把 module 切成多個檔，需要的時候才動態載進來

搭配 Webpack + Babel 讚

React Router
Vue Router
也都支援！

Bootstrap

F12 ->

Ctrl + Shift + P ->

Coverage

Precache

現在還沒⽤到，但先偷偷 cache 起來

HTTP/2

React

http://s.itho.me/modernweb/2017/day1/101-4-CodinCat.pdf

BTW

React 或 Vue 之類的 library 請確定是 production build

有個 Extension 會幫你檢查

80/20 法則

要動⼿⼀定是從 CP 值⾼的先

Perf doesn't get good by magic. Never one thing, it's always many little things

- Alex Russell

分散式緩存服務實踐

- 羅仲成 Roy Lou

http://s.itho.me/modernweb/2017/day1/202-3-Roy%20Lou.pdf