내 포트폴리오를 재설계하세요! 매우 빠르게 로드됩니다 ⚡

안녕하세요 여러분!


이것은 블로그 작성에 대한 두 번째 시도입니다.



그래서 약 2년 전에 웹 개발을 배웠습니다. Bootstrap4를 사용하여 포트폴리오를 구축하기로 결정했습니다. 이전 포트폴리오는 3.5초 만에 로드되었고 성능 점수는 69점이었습니다. 이전 포트폴리오에 있는 대부분의 콘텐츠는 정적이어서 프로젝트 목록을 변경하려면 HTML을 변경해야 했습니다. 그래서 AlpineJs 및 Bootstrap4을 사용하여 포트폴리오 사이트를 재구축(및 재설계)하기로 결정했습니다.



5일 동안 쉬지 않고 작업한 후 마침내 내 사이트를 AlpineJs로 마이그레이션했습니다! 사이트가 조금 더 빠르다는 것을 알 수 있습니다.

왜 AlpineJS인가?

AlpineJS로 시작하기

Thomas Toledo-Pierre ・ 2020년 1월 3일 ・ 7분 읽기

#javascript #alpinejs #gulp #webdev

당신이 옳습니다: 주변에 거대한 커뮤니티가 있는 다른 많은 도구가 있는데 왜 새로운 도구를 다시 배우려고 합니까?
여기에 몇 가지 장점이 있습니다.

처음부터 라이브러리의 발전 과정을 따라가며 기여할 수 있습니다.

React, Vue는 많은 개발자들에게 찬사를 받는 반면 AlpineJS는 오늘날의 프레임워크보다 기본에 훨씬 더 가까운 프런트 엔드 웹을 수행하는 훨씬 가벼운 방법을 제시합니다.

데이터 소스가 JSON 파일이므로 Alpine에서는 JSON에서 데이터를 로드하고 HTML에서 구문 분석하는 것이 쉽습니다. (더 이상 정적 콘텐츠가 없습니다 🎉)

속도를 최적화하는 방법

렌더링 차단 리소스 제거( using async and defer )

<link rel="stylesheet" href="build/all.css" media='all' />

<script src="build/app.js" defer></script>

사용하지 않는 CSS를 제거하는 데 사용됩니다Purge.

CDN을 사용하여 양호한 캐시 정책으로 정적 콘텐츠 제공
정적 콘텐츠를 제공하기 위해 netfly CDN을 사용했습니다.

더 나은 압축률을 위해 webp 이미지를 사용함

모듈 번들러(Webpack)를 사용하여 파일 축소 및 번들링

다음은 내portfolio에 대한 링크입니다.

다음은 소스 코드github에 대한 링크입니다.

사이트에 다크모드도 추가할 예정입니다.🌙

내 포트폴리오 사이트에서 피드백을 받고 싶습니다🍍

내가 놓친 것이 있습니까? 댓글로 알려주세요 :)

감사합니다!