Vue 프로젝트 패키지 압축 의 실현(페이지 가 더 빨리 응답 하도록)

웹 페이지 응답 속도 에 영향 을 주 는 요 소 는 매우 많다.예 를 들 어 http 요청 횟수 가 너무 많 고 서버 자체 의 처리 요청 이 너무 오래 되 며 요청 내용 이 너무 크 고 JS 스 크 립 트 의 실행 시간 이 너무 길 며 브 라 우 저 환류 재 그림 등 이다.사이트 페이지 의 응답 속 도 는 사용자 체험 과 밀접 한 관 계 를 가지 고 사용자 가 당신 의 사 이 트 를 계속 방문 하 기 를 원 하 는 지 에 직접적인 영향 을 미친다.Vue 프로젝트 의 경우 가장 보편적 인 문 제 는 포 장 된 파일 이 너무 커서 불 러 오 는 시간 이 너무 길 어 질 수 있 습 니 다.
제 작은 프로젝트 는 서 너 페이지 밖 에 없 지만 서버 대역 폭 이 너무 작 아서 로드 시간 이 너무 긴 문제 가 특히 뚜렷 합 니 다.그래서 게 으 른 로드 와 gzip 압축 방식 으로 최적화 되 었 고 방문 속도 가 현저히 향상 되 었 습 니 다.
1.경로 게 으 름 로드:분할 코드 블록
Vue 는 구성 요 소 를 사용 하 는 곳 에서 Promise 를 사용 할 수 있 는 비동기 구성 요 소 를 지원 합 니 다.Promise 는 결국 resolve 를 통 해 구성 요소 대상 을 되 돌려 줍 니 다.웹 팩 의 동적 import 방식 은 코드 를 블록 으로 나 누 어 포장 하고 Promise(바로 비동기 구성 요소 에 필요 한 것)를 되 돌려 줍 니 다.경로 설정 표 에서 import 를 사용 하면 각 페이지 구성 요 소 를 서로 다른 코드 블록 으로 나 눈 다음 에 경로 가 방문 되 었 을 때 해당 하 는 구성 요 소 를 불 러 올 수 있 습 니 다.그러면 모든 내용 을 하나의 chunk 에 포장 하지 않 고'필요 에 따라 불 러 오기'를 하여 응답 속 도 를 크게 높 일 수 있 습 니 다.
동적 으로 불 러 오 는 경로 설정 방식 을 사용 하지 않 았 습 니 다:

// router.js
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

import Home from '@/pages/Home'
import Tree from '@/pages/Tree'
import SearchHighlight from '@/pages/SearchHighlight'
import Watermark from '@/pages/Watermark'

export default new VueRouter({
 routes: [
  {
   path: '/',
   component: Home,
   children: [
    {
     path: 'tree',
     name: 'Tree',
     component: Tree
    },
    {
     path: 'search-highlight',
     name: 'SearchHighlight',
     component: SearchHighlight
    },
    {
     path: 'watermark',
     name: 'Watermark',
     component: Watermark
    }
   ]
  }
 ]
})

yarn build(또는 npm run build)패 키 지 를 실행 하고 dist 폴 더 의 js 와 css 를 봅 니 다.

포장 후 js 와 css 아래 각각 두 개의 파일 이 있 는 것 을 볼 수 있 습 니 다.그 중에서 chunk-vendors 파일 은 모든 페이지 js 또는 css 파일 을 포함 하고 크기 는 각각 769 K,270 K 입 니 다.현재 경로 설정 을 수정 하여 동적 으로 구성 요 소 를 불 러 오 는 방식 으로 포장 합 니 다.포장 한 파일 이 어떤 지 보 세 요.
()=>import('xxx')형식 으로 구성 요 소 를 도입 합 니 다.

// router.js
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

export default new VueRouter({
 routes: [
  {
   path: '/',
   component: () => import('@/pages/Home'),
   children: [
    {
     path: 'tree',
     name: 'Tree',
     component: () => import('@/pages/Tree')
    },
    {
     path: 'search-highlight',
     name: 'SearchHighlight',
     component: () => import('@/pages/SearchHighlight')
    },
    {
     path: 'watermark',
     name: 'Watermark',
     component: () => import('@/pages/Watermark')
    }
   ]
  }
 ]
})

yarn build(또는 npm run build)패 키 지 를 실행 하고 dist 폴 더 의 js 와 css 를 봅 니 다.

js 와 css 폴 더 아래 에 각각 4 개의 chunk-*파일 이 더 나 왔 습 니 다.우리 가 동적 으로 도입 한 4 개의 구성 요소 에 딱 맞 게 우리 가 특정한 페이지 에 접근 해 야 페이지 에 대응 하 는 chunk-*.js 와 chunk-*.cs 를 불 러 옵 니 다.파일 크기 를 살 펴 보면 핵심 적 인 JS 파일 chunk-venders 크기 는 769 K 에서 725 K 로 낮 아 졌 습 니 다.제 4 개의 페이지 코드 가 매우 간단 하고 최적화 효과 가 크 지 않 은 것 처럼 보이 지만 한 페이지 의 많은 대형 프로젝트 에서 최적화 효과 가 매우 뚜렷 하고 CSS 부분 도 이와 같 습 니 다.
2.압축 요청 자원
1.원리 소개
일상적으로 우리 가 네트워크 디스크 를 사용 할 때,매우 큰 폴 더 를 업로드 하 는 것 은 틀림없이 매우 느 릴 것 이다.이때 우 리 는 그것 을 압축 패키지 로 압축 할 것 이다.다운로드 가 필요 할 때 다운로드 하여 압축 을 풀 면 된다.이렇게 하면 업로드 와 다운로드 의 시간 을 크게 절약 할 수 있다.같은 원 리 는 네트워크 요청 에 사용 할 수 있 습 니 다.우리 가 서버 에 자원 을 요청 할 때,예 를 들 어 js 나 css 파일,서버 는 파일 을 압축 한 다음 브 라 우 저 로 돌아 가 브 라 우 저 작업 으로 압축 을 풀 면 사용 할 수 있 습 니 다.
우선 브 라 우 저 는 요청 을 보 낼 때 요청 헤드 Accept-Encoding 을 통 해 서버 에 이 브 라 우 저가 어떤 인 코딩 형식의 자원 을 지원 하 는 지 알려 줍 니 다.브 라 우 저의 network 를 열 고 현재 웹 페이지 의 요청 헤 더 를 봅 니 다:

Accept-Encoding 의 값 은 브 라 우 저가 gzip 로 생 성 된 인 코딩 형식 이나 deflate 압축 알고리즘 으로 생 성 된 인 코딩 형식 을 지원 한 다 는 것 을 표시 합 니 다.이 는 서버 에 요청 한 자원 을 이 두 가지 방법 으로 압축 할 수 있다 면 저도 가능 하 다 는 것 을 알려 줍 니 다.Accept-Encoding 은 copress 압축,idenity 압축 되 지 않 는 기본 형식 도 있 을 수 있 습 니 다.
서버 가 자원 을 압축 인 코딩 하면 응답 헤드 Content-Encoding 을 통 해 현재 요청 에 어떤 인 코딩 형식 을 사 용 했 는 지 알려 줍 니 다.물론 서버 가 이 일 을 하지 않 았 다 면 이 응답 헤드 를 되 돌려 주지 않 습 니 다.예 를 들 어 어떤 요청 이 gzip 으로 되 돌아 오 는 내용 을 압축 했 습 니 다.

2.서버 설정
일반적으로 저 희 는 서버 에 배치 할 때 nginx 를 사용 하여 프 록 시 서버 를 만 듭 니 다.모든 요청 은 nginx 를 통 해 전달 합 니 다.여기 서 nginx 가 gzip 압축 파일 을 설정 한 후에 돌아 오 는 것 을 보 여 줍 니 다.설정 하기 전에 예시 항목 이 온라인 에 발 표 된 요청 상황 을 보십시오.

이전에 생 성 된 chunk-vendors 파일 을 볼 수 있 습 니 다.크기 는 725 K 이 고 요청 시간 은 7.10 초 입 니 다.그 중에서 다운로드 시간 은 7.05 초 로 너무 느 립 니 다.nginx 를 설정 하고 gzip 을 엽 니 다.

server {
    gzip on;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}

이 설정 은 nginx 서버 가 gzip 로 돌아 갈 때types 에 표 시 된 내용 형식 을 압축 할 때 gzip 을 사용 합 니 다(물론 요청 자가 gzip 를 지원 하 는 것 이 전제 입 니 다).sudo nginx-s reload 를 실행 하여 이 설정 을 적용 합 니 다.이 때 방금 페이지 를 새로 고침 하여 효 과 를 보십시오.

같은 요청 입 니 다.요청 내용 의 크기 는 216 K 가 되 었 고 다운로드 시간 은 1s 이상으로 줄 어 들 었 습 니 다.효과 가 현저 합 니 다!nginx 는 gzip 의 다른 설정 항목 도 있 습 니 다.예 를 들 어 gzip 를 사용 할 수 있 습 니 다.comp_level 은 압축 률 을 제어 할 수 있 습 니 다(물론 압축 률 이 높 은 것 은 더 큰 서버 소 모 를 의미 할 수 있 습 니 다).관심 이 있 는 학생 들 은 nginx 문 서 를 볼 수 있 습 니 다.
3.webpack 포장 시 gzip 압축 사용
이전 단계 에서 반환 내용 은 서버 를 요청 할 때 gzip 을 사용 하여 압축 한 것 입 니 다.이러한 문제 가 존재 할 때 같은 자원 에 대한 서로 다른 요청 을 반복 적 으로 압축 하면 서버 의 CPU 와 메모리 소 모 를 증가 시 킬 수 있 습 니 다.웹 팩 을 사용 하면 copression-webpack-plugin 플러그 인 으로 코드 를 직접 압축 할 수 있 습 니 다.먼저 설치compression-webpack-plugindev 의존:

// yarn  
yarn add compression-webpack-plugin -D
//  npm
npm install compression-webpack-plugin --save-dev

간단 한 설정,더 많은 설정 은 공식 문 서 를 알 수 있 습 니 다compression-webpack-plugin:

const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
 // ...
 configureWebpack: {
  plugins: [
   new CompressionPlugin({
    test: /\.(js|css)?$/i, //        
    filename: '[path].gz[query]',　//        
    algorithm: 'gzip',　//   gzip  
    minRatio: 1,　//      1    
    deleteOriginalAssets: true //         ，    ，       gzip   ，         false
   })
  ]
 }
}

dist 에 있 는 js 와 css 폴 더 를 포장 해 보 세 요.현재 파일 은 모두.gz 로 압축 되 었 습 니 다.

압축 을 거 친 후 chunk-vendors 는 176 K 에 불 과 했 고 원시 725 K 에 비해 80%가까이 압축 되 었 다.그림,글꼴 같은 것 도 이 방법 으로 압축 할 수 있 습 니 다.test 설정 항목 의 정규 표현 식 을 수정 하면 이러한 파일 과 일치 하면 됩 니 다.하지만 지금 은 nginx 서버 에 정적 압축 을 설정 해 야 합 니 다.

server {
  gzip on;
  gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
  
  gzip_static on;
}

　　gzip_static 를 on 으로 설정 한 후 자원 에 접근 할 때'자원 경로.gz'파일 이 존재 하면 이 파일 을 되 돌려 줍 니 다.동적 gzip 보다 우선 순위 가 높 습 니 다.현재 페이지 방문:

chunk-venders 의 size 에 마 우 스 를 올 리 면'176 KB transfered over network,resource size:724K'를 알 수 있 습 니 다.프로젝트 에 요청 자원 파일 이 너무 크 면 gzip 와 같은 압축 수단 을 사용 해 보 세 요.즉각 적 인 효과 가 있 을 것 이 라 고 믿 습 니 다.
Vue 프로젝트 패키지 압축 의 실현(페이지 가 더 빨리 응답 할 수 있 도록)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 프로젝트 패키지 압축 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!