Vue 로딩 최적화 전략은 무엇입니까?

Vue 로딩 최적화 전략: 1. 경로 지연 로딩 2. 요청 시 구성 요소 로딩 3. CDN 가속 전략 사용 4. 파일을 gzip 형식으로 패키징.

【관련 추천 글 : vue.js】

vue 로딩 최적화 전략 :

방법 1. Route Lay Loading

첫 화면 로딩이 느린 이유는 단일 페이지 애플리케이션에 지나지 않습니다. 라우팅 테이블에 전체 페이지를 로드해야 하는데 지연 로딩을 라우팅하는 것이 이 문제를 해결하는 것입니다. 서로 다른 경로에 해당하는 구성 요소를 서로 다른 코드 블록으로 분할한 다음 경로에 액세스할 때 해당 구성 요소를 로드할 수 있다면 더 효율적일 것입니다. 다음은 Vue 라우팅의 지연 로딩의 구체적인 예입니다. 방법은 매우 간단합니다. 자세히 설명하고 싶지 않다면 이 형식에 따라 경로를 소개하면 됩니다. Lazy loading of Routes

방법 2. 요청 시 구성 요소 로드

왜 구성 요소를 요청 시 로드해야 합니까? 그 이유도 매우 간단합니다. 일부 구성 요소 라이브러리에는 풍부한 구성 요소가 포함되어 있으므로 직접 소개하면 전혀 사용하지 않는 일부 구성 요소를 필연적으로 소개하게 됩니다. 이렇게 하면 포장이 상대적으로 커지고 우리 입장에서도 매우 비전문적으로 보입니다. 따라서 수요에 따라 도입할 필요가 있다. 이제 온디맨드 도입 프로세스에 대해 알아보기 위해 iview 컴포넌트 라이브러리를 예로 들어 보겠습니다.

1. 먼저 주문형 로딩 도구인 babel-plugin-import를 소개합니다

　babel-plugin-import는 컴파일 과정에서 가져오기 쓰기를 자동으로 주문형 가져오기로 변환하는 바벨입니다.

npm install babel-plugin-import --save-dev

2. 프로젝트 루트 디렉터리에 .babelrc 파일을 생성하고 주문형 콘텐츠 로딩을 구성합니다

{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

3. 프로젝트가 main.js에서 로드해야 하는 구성 요소를 구성합니다

다음은 iview

의 예입니다.

여기서 주의할 점 전역적으로 등록된 컴포넌트를 vue 프로토타입에 걸어야 합니다. 예를 들어, 공지 컴포넌트를 사용해야 한다면

Vue.prototype.$Notice = Notice;

　가 있어야 iview 컴포넌트를 정상적으로 사용할 수 있습니다.

방법 3: CDN 가속 전략 사용

Vue 프로젝트에서는 프로젝트에 도입된 모든 js 및 css 파일이 컴파일 중에 Vendor.js로 패키징되므로 Vendor.js 파일 크기가 상당히 커집니다. 첫 번째 개봉 경험에 영향을 미칩니다. 해결 방법은 참조된 외부 js 및 css 파일을 분리하여 Vendor.js로 컴파일하지 않고, 대신 리소스 형식으로 참조하는 것입니다. 이렇게 하면 브라우저는 외부에서 Vendor.js를 비동기적으로 컴파일할 수 있습니다. Node.js 등을 로드하여 첫 번째 열기를 가속화하려는 목적을 달성합니다. 외부 라이브러리 파일은 CDN 리소스를 사용할 수 있습니다. CDN 구성에 있어서 vue cli3.x와 vue cli2.x에는 몇 가지 차이점이 있습니다. vue cli가 업그레이드된 후 코드 구조가 크게 변경되었으며 구성 파일이 vue.config.js 파일에 통합되었습니다. 다음은 cdn을 사용하여 리소스를 로드하는 방법을 설명하기 위해 amap, axios 및 qs를 예로 사용합니다.

1. index.html

2. 외부 구성

　 vue cli3.x는 vue.config.js

에서 webpack을 구성합니다. 전역 Amap, axios 및 Qs는 일반적으로

방법 4. 압축-웹팩 플러그인을 사용하여 파일을 gzip 형식으로 패키징합니다

　압축 웹팩 플러그인 종속성은 npm이 빌드를 실행할 때 .gz 파일을 생성합니다. 나중에 프로젝트에서 액세스하는 파일은 이 .gz 파일입니다. 일반 프로젝트 패키징 볼륨이 절반 이상 줄어듭니다. 이 종속성의 사용 과정을 자세히 설명하겠습니다.

1.npm에서는

npm install compression-webpack-plugin  --save-dev

2.vue cli3.x가 vue.config.js에서 웹팩을 구성합니다

3.nginx가 gzip 모드를 켭니다

　프론트 엔드는 이전 단계에서 구성되었으며, 그런 다음 nginx 협력 gzip 모드를 켜면 비교적 간단합니다. nginx에 대해 약간만 이해하고 있으면 nginx.conf의 http에서 일부 코드를 구성합니다.

4 구성이 성공했는지 확인합니다

이 단계 매우 간단합니다. 청크 파일 응답 헤더의 콘텐츠 인코딩이 gzip인지 확인하세요.

관련 무료 학습 권장 사항: JavaScript(비디오)

위 내용은 Vue 로딩 최적화 전략은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!