Preact 是一個輕量級的框架(又一個坑)，大小僅3kb
Preact 類似 React API 及模式，可使用 ES6 Class及Function Component

• 包含React所需要的功能: JSX, VDOM, React DevTools, HMR, SSR..
• 高度優化和伺服器端渲染
• 可以透過 preact-cli快速建立專案
• 支援 IE9 以上的主流瀏覽器

上面提到，可以透過 preact-cli 來快速建立 Preact Progressive Web App 專案
下面會介紹其特點、安裝及基本使用方式

使用 preact-cli 的方式有以下優點

• 在 Lighthouse 評比分數為 100/100 (
  proof)
• 自動根據程式碼來區分router
• 使用async! 字首，直接透過程式碼來區分component
• 透過 sw-precache 自動生成service worker 來建立離線快取
• 支援 PRPL 模式，優化載入
• 零設定 pre-rendering/ server-side rendering hydration
• 透過 Autoprefixer 支援 CSS Modules, LESS, Sass, Stylus;
• 透過 built-in tracking 分析 bundle/chunk 大小
• 自動安裝、除錯、及模組設定
• 產品版僅 4.5 kb 大小，且包含 preact, preact-router
• 包含 1.5 kb 的 fetch & promise polyfills，且視情況載入

安裝 preact-cli

npm install -g preact-cli

preact create 建立專案

透過 preact create 即可建立專案

建立專案時，需要提供 template 與 project 名稱

template 有三種選項可以使用

• default - 預設模板
• material - 使用 google material 模板
• simple - 簡單的preact設定模板

//preact create <template-name> <project-name>
preact create default my-project

啟用開發版本 server

啟用開發版本的 server 有兩種方式，第一種是直接 watch

preact watch

第二種方式是透過 start，並且會判斷目前是開發或產品版本，進行不同的啟動

yarn start

preact build

佈署、建立產品版本

preact build