아무래도 @scrpgil 입니다. Ionic을 자주 사용합니다. 이번, 폭속으로 Lighthouse의 퍼포먼스 100점의 사이트를 시작하는 방법을 알았으므로 써 둡니다.

절차

1. 프로젝트 만들기

다음 명령을 두드리자. 몇 초 안에 프로젝트가 생성됩니다.

npx create-stencil

스타터는 "ionic-pwa"를 선택합시다. 프로젝트 이름은 임의. Confirm은 "y"를 선택합시다.

Pick a starter : ionic-pwa
Project name : stencil-ionic-pwa-demo
Confrim(y/n) : y

2.GitHub로 푸시

만든 프로젝트를 GitHub로 푸시하세요.

git init 
git add .
git commit -m "first commit"
git remote add origin https://github.com/<リポジトリのパス>
git push origin master

3.Netlify에 deploy한다

프로젝트를 Netlify에 배포합니다. GitHub와 연계하고 있기 때문에 이전에 push 한 리포지토리를 선택하면 OK입니다.


배포 설정이 가능하므로 빌드 명령을 "npm run build"로, Publish directory를 "www"로 설정합시다.

4. 사이트를 방문하여 성능을 측정합니다.

잠시 후 프로젝트에 액세스할 수 있으므로 Lighthouse에서 성능을 측정하세요. 약속으로 측정 중에는 아무것도 해서는 안됩니다. 아마도 100점이 될 것입니다.




※PWA와 Accessibilty도 100점으로 하고 할 수 있으면 기사 갱신합니다.

덧붙여서 이번에 작성한 사이트는 이하.
h tps : / / s 텐시 l 이오니 c 삐 와도. 네 tぃfy. 코m/

보충

이게 뭐야?

이번에 작성한 사이트는 Stencil을 이용하여 작성되었습니다. Stencil은 Ionic 4를 만들기 위해 Ionic-team이 만든 WebComponent를 만드는 라이브러리입니다.

htps : // s 텐시 ljs. 코 m/도 cs/갓찐 g-s r d/


어쨌든, jsx+TypeScript로 WebComponent가 쓸 수 있는 라이브러리라고 인식입니다. 공식 문서는 20~30분 있으면 읽을 정도로 사양이 컴팩트합니다.

Ionic4(현재 버전은 3)

일부 경계에서는 Ionic은 성능이 나쁘다고 말해지고 있다고 합니다만, Ionic4에서 그렇게 상당히 개선될 것 같습니다

현재, Ionic4는 Beta판이므로 아직 실천 투입은 빠를지도 모릅니다만, 릴리스가 매우 기대이므로 지금부터 만져 두려고 생각합니다. 끝.