關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

Preact 基本介紹

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

如果你喜歡我們的文章內容,請在這裡按個讚



最新文章推薦