Netlify에서 내 SvelteKit 웹 사이트 가져오기

내 사이트의 날씬한 버전 문제를 해결한 후에 그것을 생산에 투입할 때가 되었다.또는 본 예에서 Netlify에 위탁 관리한다.바로 이 부분에서 나는 SvelteKit가 테스트 단계에 있고 아직 생산할 준비가 되지 않은 것을 어렵게 발견했다.내가 너를 데리고 Netlify에 사이트를 배치하는 여정에 올라가서 내가 성공했는지 보겠다. (스포일러: 너는 SvelteKit 버전에서 이 글을 읽고 있다.)

Netlify에서 호스팅

현재 내 사이트는 로컬에서 운영되고 있으니, 나는 반드시 그것을 Netlify에 배치해야 한다.SvelteKit에는 adapter-netlify 패키지가 있습니다.이 패키지는 SSR 웹 사이트의 '서버' 역할을 하는 Netlify 기능을 만들었습니다.그래서 저는 기본 버전adapter-node을 Netlify 버전으로 바꿔서 GitHub과 Netlify가 역할을 발휘하도록 했습니다.그리고잘못 1
이것은 내가 왜 SvelteKit가 여전히 테스트 단계에 있는지 발견할 때이다.일반적으로 모든 소프트웨어 패키지는 devDependencies입니다.그러나 Netlify 기능에서 필요한 패키지를 찾을 수 없습니다.그래서 나는 가방을 devDependencies에서 dependencies로 이동하고 deploy를 다시 눌렀다.진보!Netlify 함수에서 패키지를 찾을 수 있습니다.몇몇 문제는 여전히 존재하지만, 여전히 진전을 거두었다.로컬 버전으로 돌아가서 복구합니다.

근데 잠깐만요?로컬 버전이 더 이상 유효하지 않습니까?분명히 로컬 구축 도구Vite는 내 모바일 패키지를 좋아하지 않는다.몇 가지 일을 시도한 후에 나는 포기했다.SvelteKit는 아직 테스트 단계이기 때문에 지역사회 자원이 희소하다.나는 확실히 Sapper의 예를 찾았다. 이것은 SvelteKit의 전신이고 사용adapter-static이다.성공!좋아요.좀.
나는 나의 일부 가격 인하 문서가 페이지로 정확하게 변환되었지만, 전부는 아니었다는 것을 발견했다.검색과 디버깅을 통해 나는 이 문제를 발견하였다.adapter-static 색인 루트에서 시작된 모든 링크를 옮겨다니며 찾을 수 있는 모든 링크 페이지에 페이지를 생성합니다.만약 가격 인하 파일이 페이지에 링크로 나타나지 않았다면, 그것은 생성되지 않았을 것이다.

The adapter-static changes the solution from SSR to SSG: the pre-rendered HTML is generated on build time instead of runtime.

사이트 검색엔진 최적화

일반적으로 SSR과 SSG는 현대 웹 사이트를 만드는 SEO의 우호적인 방식이다.게이츠비와 스위트(Kit)는 모두 나로 하여금 SEO의 우호적인 사이트를 만들 수 있게 할 것이다.나는 web.dev measure 도구를 사용하여 나의 사이트 점수를 확정한다.개츠비 버전의 홈페이지는 모든 종류에서 100점을 받았다.하지만 슬림핏도 마찬가지다.

그러나 점수는 이 도구의 유일한 지표가 아니다.상호작용 시간을 제외하고 사이트의 두 버전의 대다수 지표는 모두 같다.게이츠비 버전은 2.4초, 스웨트키트 버전은 1.0초였다.두 사람의 득점은 모두 좋았지만, 스웨트키트가 더 우수했다.

Time to interactivity: the actual time it takes to load everything allowing the user to interact with the page

이것은 페이지를 불러올 때 전송되는 파일로 구동됩니다.개츠비 버전에서는 약 950kB의 24개의 파일을 다운로드해야 한다.SvelteKit 버전은 14개 파일 중 약 280kB만 필요합니다.스웨트키트가 이겼다!
하지만 우리가 테스트할 수 있는 것은 홈페이지만이 아니다.다른 페이지에서는 SvelteKit에 대한 평점이 그다지 높지 않습니다.인터넷에서 발견된 더 큰 문제dev가 방향을 바꾸고 있습니다.사이트를 만들 때 SvelteKit는 URL에 뒤에 있는 빗장by design이 없다.그러나 Netlifynormalizes는 모든 URL을 슬래시가 있는 버전으로 가리킵니다.이것은 다음 제목을 각 페이지에 다시 추가합니다.

/post-title /post-title/ 301!

Netlify에서 "자산 최적화"설정을 사용하면 이러한 규범화를 닫을 수 있습니다.재배치와 재평가 후 웹.dev 점수가 현저히 증가하다.지금은 개츠비에 비해 단일 게시물 페이지의 점수가 훨씬 높다.특히 상호작용 시간 지표에서

Turning off all asset optimizations on Netlify increased performance on my website. But, it can have unwanted side-effect due to the lack of URL normalization. Use with caution.

결론

내가 안정된 게이츠비에서 불안정한 스웨트키트로 공측을 돌았을 때, 나는 위험을 무릅썼다.나는 새로운 프레임워크를 배워야 할 뿐만 아니라, 지역 사회 플러그인을 바꾸기 위해 논리를 구축해야 한다.나는 이전에 매우 드물었던 실수를 만날 위험에 직면해 있다.구글이나 덤프에 의존할 수 없다는 것을 알고 나는 심연으로 뛰어들었다.하지만 결국 모든 것이 보답을 받았다.나는 속도가 더 빠를 뿐만 아니라, 나에게 있어서 일하는 것도 더욱 즐겁다.Svelte와 SvelteKit가 가져온 체험은 희망적이어서 지금은 입을 다물 수가 없어요.

If you are curious about the result, check the code on the open GitHub repository.