Vue 프로젝트 최적화 방법 요약

이번에는 Vue 프로젝트 최적화 방법에 대한 요약을 가져오겠습니다. Vue 프로젝트 최적화를 위한 주의사항은 무엇인가요?

이미지 최적화

1. 이미지 크기 최적화, 일부 이미지는 WebP를 사용합니다(webp 호환성을 고려해야 함)

1. Zhitu, Youpaiyun

2. gulp 생성, gulp-webp 또는 gulp와 같은 온라인 생성 -imageisux

3. 캔버스 생성

2. 이미지 요청을 줄이고 Sprite 이미지를 사용하세요

1. 온라인 생성: Sprites Generator, Tencent's gopng, spriteme

2. 코드 생성: gulp.spritesmith 또는 sass compass

Page성능 최적화

이미지 또는 구성 요소의 지연 로딩

vue-lazyload 구성 요소 또는 기타 구성 요소 사용

vue-lazyload 주소: https://www.npmjs.com/package /vue -lazyload

그림 지연 로딩: v-lazy 또는 v-lazy-container를 사용하여 그림 그룹을 포함

// 引入一张图片 
<img  src="/static/imghwm/default1.png" data-src="//domain.com/img1.jpg" class="lazy" alt="Vue 프로젝트 최적화 방법 요약" > 
// 引入一组图片
<p>
 <img  src="/static/imghwm/default1.png" data-src="//domain.com/img1.jpg" class="lazy" alt="Vue 프로젝트 최적화 방법 요약" >
 <img  src="/static/imghwm/default1.png" data-src="//domain.com/img2.jpg" class="lazy" alt="Vue 프로젝트 최적화 방법 요약" >
 <img  src="/static/imghwm/default1.png" data-src="//domain.com/img3.jpg" class="lazy" alt="Vue 프로젝트 최적화 방법 요약" > 
</p>

Component 지연 로딩

Vue.use(VueLazyload, {
 lazyComponent: true
});
<lazy-component>
 <img  class="mini-cover lazy" src="/static/imghwm/default1.png" data-src="img.src" alt="Vue 프로젝트 최적화 방법 요약" >
</lazy-component>

그림 사전 로딩

빠르게 그림 표시

사용 시나리오: 특정 A에서 다음 페이지에서 사진을 지속적으로 검색할 때 서버에서 데이터를 가져온 다음 사진을 표시하면 사진이 느리게 로드됩니다. 이때 새 데이터를 표시할 때 사진을 먼저 미리 로드할 수 있습니다. 사진이 로드되었으니 이제 해당 위치에 이미지를 채워주세요

3자 플러그인 레이지 로딩(주문형 로딩)

js 파일은 일반적으로 동기식으로 로드되며, 페이지에 배치하면 메인 페이지가 차단됩니다. js 파일 로딩.

사용 시나리오: 일부 프로젝트에서 jquery와 같은 파일을 도입해야 하는 경우 구성 요소 내에 이러한 파일을 도입하면 페이지 렌더링이 어느 정도 차단됩니다. 따라서 특정 events(클릭 또는 팝- 위로 창) 홈페이지를 만들 수 있습니다. 페이지가 빠르게 표시됩니다.

페이지 비동기 로딩, 구성 요소가 겹치는 것을 방지하는 방법

여러 vue 구성 요소가 로드되고 동시에 서버 측 데이터를 통해 구성 요소가 렌더링되면 여러 구성 요소가 먼저 겹쳐진 다음 분리됩니다

세 가지 솔루션

• 페이지에 표시되는 부분이 고정되어 컨텐츠 높이 변경이 쉽지 않은 경우, 컴포넌트 외부에 미리 고정된 높이를 설정해 놓으면 프레임에 컨텐츠를 추가하는 것처럼 표시됩니다. 페이지의 내용이 고정되지 않은 경우 비동기 로딩 시 컴포넌트가 겹치는 문제를 줄이기 위해 특정 컴포넌트의 데이터가 로딩될 때 첫 번째 화면에 다른 컴포넌트가 표시되도록 설정할 수 있으며, v- 보여주다.

• 페이지가 전체적으로 고정되면 페이지에 뼈대를 추가하여 페이지가 깜박이는 것을 방지할 수 있습니다. 구체적인 구현 방법은 http://www.jb51.net/article/130505.htm

• 서버 측 렌더링 페이지를 참조하세요. 데이터가 고정되어 있고 변경 사항이 거의 없는 일부 페이지의 경우 서버 측 렌더링을 고려할 수 있습니다. 이는 짧은 시간 내에 완료되며 페이지를 표시하고 더 나은 사용자 경험을 제공합니다.

가져온 외부 파일의 크기 줄이기

프로젝트에 일부 ElementUI 콘텐츠가 도입되면 babel-plugin-comComponent를 도입하여 .babelrc 파일을 구성하여 일부 구성 요소를 도입할 수 있도록 하여 크기를 줄입니다. 구성 요소.

라우트의 지연 로딩

그러나 vue-router를 사용할 때 webpack은 모든 구성 요소를 js 파일로 패키징하므로 ​​파일이 매우 커져서 홈페이지 로딩에 영향을 미칠 수 있습니다. to 다른 경로는 다른 js 파일로 패키징되며 경로 전환 시 해당 js 파일이 로드됩니다.

resolve => require([URL], resolve), 좋은 지원

() => system.import(URL), webpack2 공식 홈페이지에서는 점차 폐지될 예정이라고 밝혔으며,

( )는 권장되지 않습니다 => webpack2 공식 웹사이트에서 권장하는 import(URL)는 es7 카테고리에 속하며 babel의 Syntax-dynamic-import 플러그인과 함께 사용해야 합니다

읽어보신 후 이 방법을 마스터하셨으리라 믿습니다. 이 기사의 사례에 대해 더 흥미로운 내용을 보려면 다른 PHP 중국어 웹사이트 관련 기사를 주목하세요!

추천 도서:

JS 파일을 동적으로 로드하는 세 가지 방법 요약

js가 게시 요청을 지원하는 도메인 간 방법 요약

위 내용은 Vue 프로젝트 최적화 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!