큰 미디어가 진행되는 순립

최근에 나는 Netlify 큰 미디어 설정을 해결했으며 내 경험을 공유 할 것이라고 생각했습니다. git 대형 파일 스토리지 (Git LFS)가 핵심입니다. 기본 git 저장소에서 큰 파일을 보관합니다. 500MB의 이미지가 장착 된 웹 사이트를 상상해보십시오. Repo에 직접 포함하여 이미지를 포함하여 클로닝이 악몽을 이루는 웹 사이트를 상상해보십시오. Git LFS는 큰 파일을 별도로 저장하여이를 해결합니다.

GIT LFS에 대한 대규모 미디어를 구축하여 설정을 단순화하고 중요한 이점을 추가합니다 : URL 매개 변수를 통한 비행 금속 이미지 크기 조정. 이 자동화 된 크기 조정은 큰 시간을 절제합니다.

공식 문서는 좋은 출발점이지만 몇 가지 장애물을 만났으며 아래에 문서화 할 것입니다.

필요한 설치 (MACOS)

이 단계는 MACOS를위한 것입니다. 다른 시스템에 필요한 경우 조정하십시오. 당신은 필요합니다 :

1. Git LFS : brew install git-lfs
2. Netlify CLI : npm install netlify-cli -g
3. Netlify 대형 미디어 플러그인 : netlify plugins:install netlify-lm-plugin 한 다음 netlify lm:install

귀하의 사이트를 연결합니다

CLI를 프로젝트에 연결하려면 NetLify로 인증하십시오.

 Netlify 링크

사이트 ID가 포함 된 .netlify/state.json 파일을 생성합니다.

 {
    "siteId": "xxx"
}

큰 미디어 설정

설정 명령 실행 :

 Netlify LM : 설정

.lfsconfig 파일을 만듭니다.

 <code>[lfs] url = https://xxx.netlify.com/.netlify/large-media</code>

.netlify/state.json 및 .lfsconfig 모두 커밋하십시오.

이미지 추적

GIT LFS를 사용하여 관리해야 할 이미지 유형을 지정하십시오.

 git lfs 트랙 "*.jpg" "*.jpeg" "*.png"

(참고 : 처음에는 .jpeg 놓쳤으며 문제가 발생합니다. 모든 관련 확장을 포함시켜야합니다.)

예를 들어 .gitattributes 파일을 생성합니다.

 <code>*.jpg filter=lfs diff=lfs merge=lfs -text *.png filter=lfs diff=lfs merge=lfs -text *.jpeg filter=lfs diff=lfs merge=lfs -text</code>

커밋 및 밀기 후 이미지는 대형 미디어를 넷리닝에 업로드합니다. 이 푸시는 파일 크기에 따라 시간이 걸릴 수 있습니다.

잠재적 인 걸림 : 초기 푸시가 멈췄습니다. 솔루션은 netlify-credential-helper 설치하는 것이 었습니다.

이 과정은 이미지에만 국한되지 않습니다. 큰 이진 파일은 이런 식으로 처리 할 수 ​​있습니다.

사후 설정 : 파일이 아닌 포인터

초기 푸시 후, 저장소에는 NetLify 큰 미디어에 저장된 파일에 대한 포인터 만 포함됩니다.

현대 상승 : 가장 좋은 부분

URL 매개 변수를 사용하여 동적으로 이미지 크기 조정 :

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="큰 미디어가 진행되는 순립">

최적의 성능을 위해 반응 형 이미지 기술과 결합하십시오.

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="큰 미디어가 진행되는 순립">

위 내용은 큰 미디어가 진행되는 순립의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!