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

  • 透過 preact-compat 就能簡單的兼容 React
  • 包含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 可以參考 preactjs-templates

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