どうも@scrpgilです。Ionicをよく使います。今回、爆速でLighthouseのパフォーマンス100点のサイトを立ち上げる方法がわかったので書いておきます。
手順
1.プロジェクトを作成する
以下のコマンドを叩きましょう。数秒でプロジェクトが生成されます。
npx create-stencil
Starterは「ionic-pwa」を選択しましょう。プロジェクト名は任意。Confirmは「y」を選択しましょう。
Pick a starter : ionic-pwa
Project name : stencil-ionic-pwa-demo
Confrim(y/n) : y
2.GitHubにpushする
作成したプロジェクトをGitHubにPushしましょう。
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/<リポジトリのパス>
git push origin master
3.Netlifyにdeployする
プロジェクトをNetlifyにdeployしましょう。GitHubと連携しているので先程のpushしたリポジトリを選択すればOKです。
デプロイ設定ができますので、Build commandを「npm run build」にPublish directoryを「www」に設定しましょう。
4.サイトにアクセスしてパフォーマンス計測しましょう。
しばらくするとプロジェクトにアクセスできるのでLighthouseでパフォーマンスを計測しましょう。お約束として測定中は何もしちゃいけません。恐らく100点になるはずです。
※PWAとAccessibiltyも100点にしてできたら記事更新します。
ちなみに今回作成したサイトは以下。
https://stencil-ionic-pwa-demo.netlify.com/
補足
これは何か？
今回作成したサイトはStencilを用いて作成されています。StencilはIonic 4を作成するためにIonic-teamが作成したWebComponentを作るためのライブラリです。
https://stenciljs.com/docs/getting-started/
ざっくり、jsx+TypeScriptでWebComponentが書けるライブラリって認識です。公式ドキュメントは20〜30分あれば読み終わるぐらい、仕様がコンパクトです。
Ionic4（現行バージョンは3）
一部界隈ではIonicはパフォーマンスが悪いとか言われてるそうですが、Ionic4でそこらへんかなり改善されそうです
現在、Ionic4はBeta版なのでまだ実践投入は早いかもですが、リリースがとても楽しみなので今から触っておこうとおもいます。おわり。