Vue 프로젝트 패키지,통합 및 압축 최적화 웹 페이지 응답 속도

머리말
웹 페이지 응답 속도 에 영향 을 주 는 요 소 는 매우 많다.예 를 들 어 요청 내용 이 너무 크 고 http 요청 횟수 가 너무 많 으 며 서버 자체 의 처리 요청 이 너무 오래 걸 리 고 JS 스 크 립 트 의 실행 시간 이 너무 길 며 브 라 우 저 환류 재 그림 등 이다.사이트 페이지 의 응답 속 도 는 사용자 체험 과 밀접 한 관 계 를 가지 고 사용자 가 당신 의 사 이 트 를 계속 방문 하 기 를 원 하 는 지 에 직접적인 영향 을 미친다.Vue 프로젝트 의 경우 가장 보편적 인 문 제 는 포 장 된 파일 이 너무 커서 불 러 오 는 시간 이 너무 길 어 질 수 있 습 니 다.서버 요청 처리 가 너무 오래 걸 리 고 js 스 크 립 트 를 실행 하 는 데 시간 이 너무 오래 걸 립 니 다.이 두 가지 코드 의 품질 과 서버 설정 관계 가 너무 무 겁 습 니 다.구체 적 인 프로젝트 와 코드 에 따라 최적화 해 야 합 니 다.오늘 우 리 는 요청 횟수 와 포장 후의 단일 파일 이 너무 큰 두 가지 측면 에서 웹 페이지 응답 속 도 를 최적화 해 야 합 니 다(이것 은 모든 전단 항목 에 적 용 됩 니 다).
1.요청 내용 이 너무 크다
프로젝트 를 포장 한 후에 우 리 는 포장 한 파일 vendors 와 app 파일 이 특히 너무 크다 는 것 을 자주 발견 할 수 있 습 니 다.그 중에서 app.js 파일 에는 프로젝트 의 각 페이지 의 논리 코드 가 놓 여 있 고 vendor.js 는 각 페이지 의 각 구성 요소 가 공용 하 는 코드 를 놓 습 니 다.프로젝트 의 복잡 도가 증가 함 에 따라 이 파일 의 크기 도 나날이 증가 하고 있다.대역 폭 이 제 한 된 상황 에서 이 두 파일 을 다운로드 하면 오래 기다 리 는 경우 가 많다.
해결 방안:
로 케 일 로드:분할 코드 블록Vue 는 구성 요 소 를 사용 하 는 곳 에서 Promise 를 사용 할 수 있 는 비동기 구성 요 소 를 지원 합 니 다.Promise 는 결국 resolve 를 통 해 구성 요소 대상 을 되 돌려 줍 니 다.웹 팩 의 동적 import 방식 은 코드 를 블록 으로 나 누 어 포장 하고 Promise(바로 비동기 구성 요소 에 필요 한 것)를 되 돌려 줍 니 다.경로 설정 표 에서 import 를 사용 하면 각 페이지 구성 요 소 를 서로 다른 코드 블록 으로 나 눈 다음 에 경로 가 방문 되 었 을 때 해당 하 는 구성 요 소 를 불 러 올 수 있 습 니 다.그러면 모든 내용 을 하나의 chunk 에 포장 하지 않 고'필요 에 따라 불 러 오기'를 하여 응답 속 도 를 크게 높 일 수 있 습 니 다.다음 그림 에서 보 듯 이 도입 경로 구성 요소:

CDN 도입
비 즈 니스 코드 는 자주 업 데 이 트 됩 니 다.브 라 우 저가 가능 한 한 오랫동안 정적 파일 을 캐 시 할 수 있 도록 라 이브 러 리 코드 와 비 즈 니스 코드 를 함께 묶 으 면 라 이브 러 리 코드 는 비 즈 니스 코드 의 업데이트 에 따라 업 데 이 트 됩 니 다.브 라 우 저 에 캐 시 되 어 있 지 않 습 니 다.저 희 는 캐 시 를 이용 하여 브 라 우 저 트 래 픽 을 줄 이 고 사용자 브 라 우 저 로 딩 속 도 를 높이 기 를 원 하기 때문에 따로 나 누 어 포장 합 니 다.일반적으로 제3자 패 키 지 는 script 도입 방안 이 있 습 니 다.포장 할 때 제3자 패 키 지 를 만 드 는 것 을 무시 한 다음 에 템 플 릿 에 해당 하 는 가 져 오기 링크 를 추가 합 니 다.
우선 프로젝트 루트 디 렉 터 리 에 vue.config.js 를 만 들 필요 가 없습니다.
구체 적 인 코드 는 다음 과 같다.

const cdn = {
    //          
    externals: {
      vue: 'Vue',
      "element-ui": "ELEMENT",
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      moment: "moment",
      echarts: "echarts"
    },
  
    //   cdn    
    js: [
      'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
      'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
      'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
      'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
      'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js',
      'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js',
      "https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.2/index.js",
    ],
  
    css: ["https://unpkg.com/[email protected]/lib/theme-chalk/index.css"],
  }

module.exports = {
    publicPath: '/CRM/dist/',
    // publicPath: './',
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].cdn = cdn
            return args
          })
          config.plugins.delete('prefetch')
    },
    //        
    configureWebpack: { 
        externals: cdn.externals
    },
}

그리고 pulic/index.html 템 플 릿 의 해당 위치 에 추가 합 니 다.

//   css ,script       ，       ，config       cdn  ，          
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="stylesheet">
    <!-- <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" crossorigin="anonymous"></script> --> 
  <% } %>

CDN 을 사용 하면 포장 속 도 를 높 일 수 있다 는 또 다른 장점 도 있다.
압축 요청 자원
일반적으로 저 희 는 서버 에 배치 되면 nginx 를 사용 하여 프 록 시 서버 를 만 들 고 모든 요청 은 nginx 를 통 해 전달 합 니 다.nginx 설정 을 통 해 gzip 을 열 수 있 습 니 다.

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

위의 설정 을 통 해 브 라 우 저가 서버 에 자원 을 요청 할 때마다 서버 는 먼저 자원 을 압축 한 후에 브 라 우 저 에 게 되 돌려 주 고 브 라 우 저 는 받 은 후에 압축 을 풀 어 처리 합 니 다.이렇게 하면 정적 자원 의 다운로드 속 도 를 크게 높 일 수 있다.
그러나 또 하 나 는 브 라 우 저 가 서버 에 요청 할 때마다 서버 에서 압축 작업 을 한 번 씩 수행 합 니 다.요 구 량 이 많 을 때 이 작업 을 압축 하 는 것 도 서버 의 응답 속도 에 영향 을 줄 수 있 기 때문에 우 리 는 직접 포장 할 때 파일 을 압축 패키지 로 포장 할 수 있 습 니 다.이렇게 하면 서버 가 자주 포장 하지 않 아 도 된다.
설치 의존:compression-webpack-plugin
npm install compression-webpack-plugin --save-dev
vue.config.js 수정:

const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
    publicPath: './',
    productionSourceMap: false,
    configureWebpack: {...},
    chainWebpack: config => {
        config.resolve.alias.set('@', resolve('src'));
        if (process.env.NODE_ENV === 'production') {
            config.plugin('compressionPlugin')
            .use(new CompressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: productionGzipExtensions,
                threshold: 10240,
                minRatio: 0.8,
                deleteOriginalAssets: true
            }));
        }
    },
};

nginx 설정

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

1.http 요청 횟수 가 너무 많 습 니 다.
모든 일 에는 정도 가 있다.즉,우리 가 말 하 는 것 은 극 에 달 하면 반드시 반대 하 는 것 이다.우 리 는 필요 에 따라 불 러 오고 코드 를 분할 하여 포장 한 후에 프로젝트 가 점점 커지 고 모듈 이 점점 많아 질 때 프로젝트 를 포장 한 후에 우 리 는 많은 파일 을 생 성 할 것 이라는 것 을 알 게 될 것 이다.전단 성능 에 있어 서 모든 파일 이 더 작 아 졌 지만 더 많은 네트워크 연결 구축 과 닫 기 비용 을 의미 할 수 있 으 므 로 전단 최적화 실천 에 서 는 파일 수량 과 단일 파일 크기 사이 의 균형 이 필요 합 니 다.웹 팩 에서 제공 하 는 플러그 인 MinChunk SizePlugin 을 이용 하여 minChunk Size 보다 작은 chunk 를 합 쳐 chunk 부 피 를 지정 한 크기 제한 이상으로 유지 할 수 있 습 니 다.
해결 방안:
vue.config.js 설정

module.exports = {
    publicPath: './',
    productionSourceMap: false,
    configureWebpack: {
        plugins: [
            new webpack.optimize.MinChunkSizePlugin({
              minChunkSize: 10000 // Minimum number of characters
            })
        ]
    },
}

상기 작업 을 통 해 우 리 는 포 장 된 파일 을 합 리 적 인 크기 와 수량 범위 내 에서 제어 하고 ngnix 설정 에 맞 춰 gzip 를 열 수 있 습 니 다.기본적으로 대부분의 vue 단일 페이지 응용 을 해결 할 수 있 습 니 다.처음으로 불 러 오 는 대기 시간 이 너무 긴 문 제 를 해결 할 수 있 습 니 다.
총결산
Vue 프로젝트 패키지,통합 및 압축 최적화 웹 페이지 응답 속도 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 프로젝트 패키지,통합 및 압축 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 희 를 많이 사랑 해 주세요!