Vue 배경 이미지 패키징 후 잘못된 액세스 경로 문제를 해결하는 방법

이 글은 주로 Vue 배경 이미지를 패키징한 후의 액세스 경로 오류 문제에 대한 해결 방법을 소개합니다. 내용이 꽤 괜찮아서 지금 공유해 보겠습니다.

케이스 환경

vue-cli 스캐폴딩을 통해 생성된 Vue 프로젝트

프로젝트 패키징 중 배경 이미지 경로 오류 문제가 발생했습니다. 구글에서 검색해본 결과 이미지 크기 제한을 초과한 것을 발견했습니다. 작은 원인

우선, 오류 지점은 url-loader에 있습니다.

// url-loader配置
// build/webpck.base.conf.js
{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 query: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

다음은 위의 url-loader 구성에 대한 설명입니다. 테스트는 프로젝트의 일반 규칙으로 끝나는 형식의 모든 파일을 일치시키는 일반 일치 규칙입니다. 사진(png, jpg, jpeg, gif, svg). 그런 다음 처리를 위해 url-loader를 사용하십시오. 10000B 이하의 파일을 base64로 트랜스코딩하면 이미지가 base64 형식으로 변환되는 규칙도 있습니다. 이미지가 10KB를 초과하면 utils.assetsPath('img/[name].[hash:7].[ext]') 디렉터리에 별도로 패키지됩니다. (build/utils.js 및 config/에서 이를 알 수 있습니다. index.js 경로는 static/img 디렉터리이고 이미지 이름은 해싱 후의 값입니다. 루트 디렉터리 아래에는 정적 디렉터리가 없으므로 이 디렉터리가 표시되지 않은 이유는 다음과 같습니다. 마지막에 이에 대해서는 나중에 설명하겠습니다.) 이러한 디렉터리를 생성하면 모든 이미지 액세스 경로가 해당 static/img/'그림 이름'이 됩니다. 현시점에서 10KB보다 작은 사진은 base64로 변환되고, 10KB보다 큰 사진은 사진 경로가 static/img/'사진 이름'으로 변경된 경우 액세스 경로를 계속 명확하게 할 예정이라고 판단할 수 있습니다.

// 目前我们的目录结构
index.html
static
  |--img
    |--'picname'
  |--css
    |--app.css
  |--js
    |--app.js

img가 html 태그이고 해당 경로가 index.html에서 시작하여 액세스된다는 것을 알고 있습니다. static/img/'그림 이름'으로 이동하면 이미지에 올바르게 액세스할 수 있으므로 경로가 img는 OK입니다. 그런 다음 css 디렉토리 아래에 정적 디렉토리가 없기 때문에 app.css가 static/img/'picture name'에 액세스하는 것은 액세스 오류입니다. 이로 인해 경로 액세스 실패 문제가 발생했습니다.

해결책

1. 작은 사진을 배경 사진으로 사용(권장):

img 사진으로 10KB보다 큰 사진이 있는 경우 10KB보다 작은 사진을 배경 사진으로 사용하세요.

2. url-loader의 제한 값 수정(권장하지 않음):

위 분석에서 이미지를 base64로 변환하면 경로 오류 문제가 발생하지 않음을 알 수 있습니다. 이미지를 base64로 변환하면 이런 문제를 방지할 수 있습니다. 오류가 발생하면 제한 값을 가장 큰 배경 이미지의 더 큰 값으로 변경하고 B

3 단위로 변환하면 됩니다. 권장하지 않음):

css -loader와 style-loader를 js에 직접 전달하면 js가 자동으로 스타일 태그를 생성합니다. 이렇게 하면 배경 이미지에 대한 액세스 경로는 index.html 경로를 통하게 됩니다. 하지만 이 솔루션은 권장되지 않습니다. js가 너무 커지게 되므로 그림이 너무 큰 것과 같은 이유로 base64로 변환하는 것은 권장되지 않습니다.

4. 이미지 주소 경로에 절대 경로 사용(권장)

권장: 작은 이미지를 배경 이미지로 사용하고, 큰 이미지에는 img 태그를 사용하세요. 우선, 배경 그림과 이미지 img의 차이점을 명확히 해야 합니다. 모두가 아는 한, 배경 그림은 웹 페이지를 수정하는 데 사용됩니다. 실제 콘텐츠와 관련이 없는 작업에는 배경 그림을 사용하세요. 콘텐츠와 관련된 항목이 img 태그를 사용해야 하는 경우 이는 웹페이지 구조의 콘텐츠로 간주됩니다. 수정된 사진은 가능한 한 작아야 하며, 이미지 압축 및 기타 전략을 사용하여 사진 크기를 줄일 수도 있습니다.

권장하지 않음: 제한 값 수정을 권장하지 않는 이유는 url-loader의 구성이 전체 프로젝트의 이미지에 대한 것이기 때문입니다. 제한 값을 수정하면 img 태그가 있는 이미지도 HTML도 base64로 변환되는데, base64의 경우 변환의 단점은 이미지의 원래 크기가 커진다는 것입니다. 큰 이미지를 base64로 변환하면 js 파일이 너무 커지게 되어 결과적으로 커집니다. js를 로드하는 시간입니다.

base64 정보

장점: base64는 문자열 코드로 표현되는 이미지입니다. 페이지나 js를 로드할 때 함께 로드되므로 이미지를 참조할 때 단일 http 요청이 줄어듭니다. 웹 측 성능 최적화를 이해하는 학생들은 각 http 요청이 설정되는 데 일정 시간이 걸린다는 것을 알고 있습니다. 작은 이미지 요청의 경우 http 요청 설정 시간이 이미지 다운로드 자체보다 길어질 수 있습니다. 따라서 작은 이미지의 base64 트랜스코딩은 http 요청을 최적화하고 페이지 렌더링 가속화를 보장하는 수단입니다.

단점: 앞서 언급한 base64의 단점은 이미지 자체의 크기가 증가한다는 것입니다. 작은 이미지의 경우 크기 증가로 인해 js 요청이 증가하므로 설정하는 데 걸리는 시간을 완전히 상쇄할 수 있습니다. 추가 http 요청이 필요합니다. 그러나 큰 그림에서는 이러한 절충안이 가치가 없습니다.

예를 들어주세요

예: (다음 데이터는 모두 무심코 시뮬레이션한 것입니다. 아이디어를 살펴보세요.)
http 생성 시간이 매번 0.1초이고, 네트워크 전송이 100KB/s이고, 20/20으로 변환할 때마다 볼륨이 100씩 증가합니다.

1. 10KB의 사진은 0.2초 만에 http 요청을 통해 다운로드됩니다. js 다운로드에서는 12KB입니다. 12KB 증가하므로 0.12S 증가하므로 base64로 변환하면 페이지 로딩 속도가 0.08초로 최적화될 수 있습니다.

2. http를 통한 100KB 이미지 요청 속도는 1.1초입니다. base64로 변환하면 크기가 120KB이므로 js 크기가 120KB 늘어나므로 로딩 시간이 1.2초 늘어납니다. 이렇게 계산하면 base64로 변환한 후 페이지 로딩 속도를 최적화할 수 없지만 로딩 속도가 0.1초 느려지므로 비용 효율적이지 않습니다.

생각:

개발 과정에서는 로딩 속도를 다루는 것 외에도 병렬 다운로드 문제도 고려해야 합니다. 모두 하나의 js에 들어있다면 js가 다운로드될 때까지 사진은 다운로드되지 않습니다. 즉, base64로 변환한 후에는 js와 사진이 순차적으로 다운로드된다고 볼 수 있습니다. http 요청을 사용하면 js와 동시에 사진을 다운로드할 수 있습니다. 그래서 사실은 작은 그림이 더 경제적일 필요가 있습니다

위 내용은 모두의 학습에 도움이 되기를 바랍니다.

관련 권장 사항:

vue 프로젝트의 구성, 패키징 및 게시 프로세스 소개

v-vue의 로컬 정적 이미지 로드 방법

vue 이미지 자르기 및 업로드 기능 소개 서버에

위 내용은 Vue 배경 이미지 패키징 후 잘못된 액세스 경로 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!