Vue 프로젝트를 위한 포괄적인 최적화 전략

이번에는 Vue 프로젝트의 종합적인 최적화 전략을 알려드리겠습니다. Vue 프로젝트의 종합적인 최적화를 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

PicturesOptimization

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

1. Zhitu, Youpaiyun

2. gulp 생성, gulp- webp 또는 gulp-imageisux

3. 캔버스 생성

2. 이미지 요청을 줄이고 스프라이트 그래픽

1. 을 사용하여 온라인 생성: 스프라이트 생성기, Tencent의 gopng, spriteme

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

페이지 성능 최적화

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

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>

구성 요소 지연 로딩

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>

그림 미리 로드

빠른 그림 표시

사용 시나리오: 사진을 보는 구성 요소에서 다음 페이지의 사진을 계속해서 넘겨볼 때 서버에서 데이터를 가져온 다음 사진을 표시하면 사진이 느리게 로드될 수 있습니다. 이 경우 새 데이터를 표시하기 전에 사진이 미리 로드될 수 있습니다. 해당 위치에 이미지를 채워주세요

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官网上已经声明将逐渐废除, 不推荐使用
() => import(URL), webpack2官网推荐使用, 属于es7范畴, 需要配合babel的syntax-dynamic-import插件使用

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

vue를 사용하여 구성 요소를 등록하는 방법

Vue 3계층 중첩 라우팅을 사용하는 방법

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