jampack
1.0.0
__ __
|__|____ _____ ___________ ____ | | __
| __ / \____ __ _/ ___| |/ /
| |/ __ | Y Y |_> > __ \ ___| <
/__| (____ /__|_| / __(____ /___ >__|_
______| / /| | / / /
|__|
최고의 사용자 경험과 최고의 핵심 웹 바이탈 점수를 위해 정적 웹사이트를 최적화합니다.
jampack 무엇인가요?번들러가 아닙니다. 프레임워크가 아닙니다.
jampack 은 정적 사이트 생성기(SSG라고도 함)의 출력을 가져와 최상의 사용자 경험과 최고의 Core Web Vitals 점수를 위해 최적화하는 후처리 도구입니다.
소개 블로그 게시물 읽기
jampack 무엇을 할 수 있나요?<img> < img src =" ./redpanda.jpg " alt =" Red panda " >치수에 반응하게 됩니다.
< img src =" ./redpanda.jpg.webp " alt =" Red panda "
srcset ="
./redpanda.jpg.webp 3872w, ./[email protected] 3572w, ./[email protected] 3272w,
./[email protected] 2972w, ./[email protected] 2672w, ./[email protected] 2372w,
./[email protected] 2072w, ./[email protected] 1772w, ./[email protected] 1472w,
./[email protected] 1172w, ./[email protected] 872w "
sizes =" 100vw "
loading =" lazy "
decoding =" async "
width =" 3872 "
height =" 2592 " ><picture> < picture >
< img src =" ./redpanda.jpg " alt =" Red panda " >
</ picture >AVIF를 포함한 다양한 형식으로 반응합니다.
< picture >
< source type =" image/avif "
srcset =" ./[email protected] 1936w, ./[email protected] 1636w,
./[email protected] 1336w, ./[email protected] 1036w,
./[email protected] 736w " >
< source type =" image/webp "
srcset =" ./[email protected] 1936w, ./[email protected] 1636w,
./[email protected] 1336w, ./[email protected] 1036w,
./[email protected] 736w " >
< img src =" ./redpanda.jpg "
alt =" Red panda "
loading =" lazy "
decoding =" async "
width =" 1936 "
height =" 1296 "
srcset =" ./redpanda.jpg 1936w, ./[email protected] 1636w,
./[email protected] 1336w, ./[email protected] 1036w,
./[email protected] 736w "
sizes =" 100vw " >
</ picture >더 읽어보세요
< img
src =" https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D "
alt =" Clouds in the sky by Taylor Van Riper "
width =" 2848 "
height =" 4272 "
/>된다
< img
src =" https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D "
alt =" Clouds in the sky by Taylor Van Riper "
width =" 2848 "
height =" 4272 "
loading =" lazy "
decoding =" async "
srcset ="
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=2848&fit=min&auto=format 2848w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=2548&fit=min&auto=format 2548w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=2248&fit=min&auto=format 2248w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=1948&fit=min&auto=format 1948w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=1648&fit=min&auto=format 1648w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=1348&fit=min&auto=format 1348w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=1048&fit=min&auto=format 1048w
"
sizes =" 100vw "
/>더 읽어보세요
< img
src =" https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=jpg&fit=crop&w=1287&q=80 "
alt =" Clouds in the sky by Taylor Van Riper "
/>된다
< img
src =" _jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp "
alt =" Clouds in the sky by Taylor Van Riper "
loading =" lazy "
decoding =" async "
width =" 1287 "
height =" 1931 "
srcset ="
_jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp 1287w,
_jampack/[email protected] 987w,
_jampack/[email protected] 687w
"
sizes =" 100vw "
/>더 읽어보세요
jampack 스크롤 없이 볼 수 있는 부분의 자산을 최적화합니다 ⬆️.
스크롤 없이 볼 수 있는 부분에 자산을 지연 로드합니다.
더 읽어보세요
스타일시트를 다운로드하고 구문 분석하는 동안 FOUC를 피하세요. jampack 중요한 CSS를 인라인하고 나머지 CSS를 지연 로드합니다.
더 읽어보세요
페이지의 링크를 미리 가져와 향후 페이지 탐색 속도를 높이세요. 퀵링크 덕분에 링크가 뷰포트에 들어갈 때 이 작업을 동적으로 수행할 수 있습니다.
더 읽어보세요
두 번째 PASS에서 jampack 변경되지 않은 모든 자산을 압축하고 동일한 이름과 형식을 유지합니다.
| 확대 | 압축기 |
|---|---|
.html , .htm | html-minifier-terser |
.css | lightningCSS |
.js | esbuild 또는 swc |
.svg | svgo |
.jpg , .jpeg | sharp |
.png | sharp |
.webp | sharp |
.avif | sharp |
# Optimize static website in `dist` folder
npx @divriots/jampack ./dist추가 옵션은 CLI 옵션을 참조하세요.
jampack여기에 추가하세요
jampack 이라고 부르나요?jam : Jamstack에서.pack : 90년대의 Executable Packers를 연상시킵니다. 이 소프트웨어는 MIT 라이센스 조건에 따라 출시됩니다.
