집 > 기사 > 웹 프론트엔드 > Vue의 SPA 첫 번째 화면 로딩 최적화(자세한 튜토리얼)

Vue의 SPA 첫 번째 화면 로딩 최적화(자세한 튜토리얼)

亚连원래의: 2018-06-20 15:59:072439검색

이 글은 주로 Vue SPA 첫 화면 로딩 최적화에 대한 실습을 소개하고 있습니다. 에디터가 꽤 괜찮다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 편집자를 따라가서 살펴보겠습니다

Written in front

이 글은 작성자가 Vue SPA 프로젝트의 첫 화면 로딩 최적화 과정에서 겪었던 몇 가지 함정과 최적화 솔루션을 기록하고 있습니다!

vue-cli 도구를 예로 들어 SPA 애플리케이션을 빌드합니다. UI 프레임워크로 element-ui를 선택하고 ajax 솔루션으로 vuex-router를 사용합니다. 서버는 로컬 Nginx 서비스를 사용하여 라우터를 동기화합니다.

Build the project

vue-init webpack vue-spa-starter-kit
cd vue-spa-starter-kit
npm install
npm install vuex element-ui axios -S
npm run dev

vue-cli가 자동으로 브라우저를 열고 효과를 확인할 수 있습니다. 항목 파일에 vue-router, element-ui, axios를 소개합니다

// src/main.js
import &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
import axios from &#39;axios&#39;
import store from &#39;./store&#39;
import router from &#39;./router&#39;
import {sync} from &#39;vuex-router-sync&#39;
import ElementUI from &#39;element-ui&#39;
import &#39;element-ui/lib/theme-chalk/index.css&#39;

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.prototype.$http = axios

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 store,
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

다음에는 아무런 수정도 하지 않고 기본 구성을 사용하여 패키징합니다. Nginx는 기본 구성을 사용하여 Nginx에 배포하고 Nginx 서비스를 시작합니다. 그리고 효과를 봅니다:

vendor.js가 페이지나 기능을 개발하지 않고도 788kb를 가지고 있음을 알 수 있습니다. echarts 등과 같은 다른 라이브러리에 의존한다면 Vendor.js는 100만 개 이상에 도달할 수 있습니다.

CDN 리소스 사용

vendor.js에서 vue, vue-router, vuex 및 element-ui를 분리하고 CDN 리소스를 사용하여 가져와야 합니다. 국내 CDN 서비스는 BootCDN 사용을 권장합니다. 해외에서는 별로 유용하지 않습니다. . .

먼저 템플릿 파일 index.html에 다음 콘텐츠를 추가하세요.

...
<head>
 <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="external nofollow" >
</head>
<body>
 <p id="app"></p>
 <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
 <!-- built files will be auto injected -->
</body>

Modify build/webpack.base.conf.js. 외부 구성 항목은 해당 내용을 참고하시기 바랍니다.

module.exports = {
 ...
 externals: {
  &#39;vue&#39;: &#39;Vue&#39;,
  &#39;vuex&#39;: &#39;Vuex&#39;,
  &#39;vue-router&#39;: &#39;VueRouter&#39;,
  &#39;element-ui&#39;: &#39;ElementUI&#39;
 }
 ...
}

src/router/index.js 수정

// import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
// 注释掉
// Vue.use(VueRouter)
...

src/store/index.js 수정

...
// 注释掉
// Vue.use(Vuex)
...

src/main.js 수정

import &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
import axios from &#39;axios&#39;
import store from &#39;./store&#39;
import router from &#39;./router&#39;
import {sync} from &#39;vuex-router-sync&#39;
import ELEMENT from &#39;element-ui&#39;
// import &#39;element-ui/lib/theme-chalk/index.css&#39;

Vue.config.productionTip = false

Vue.use(ELEMENT)
Vue.prototype.$http = axios

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 store,
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

주의! 여기서 element-ui 변수 이름은 ELEMENT를 사용해야 합니다. 왜냐하면 element-ui의 umd 모듈 이름은 ELEMENT

다시 압축하여 Nginx 서비스에 배포하면

vendor.js가 다음으로 축소되는 것을 볼 수 있습니다. 112kb, 85.5% 증가!

CDN 리소스를 다시 살펴보세요.

5개의 요청이 총 216kb이고 619ms가 걸린 것을 볼 수 있습니다!

Nginx가 gzip을 활성화합니다

vendor.js 최적화를 완료했습니다. 다음으로 서버의 리소스를 최적화합니다. 먼저 gzip을 켜지 않았을 때의 효과를 살펴보세요:

13.5kb

Nginx가 gzip을 켜고, nginx 구성 파일을 수정합니다. nginx.conf:

...
http {
  ...
  gzip        on;
  gzip_min_length  1k;
  gzip_buffers    4 16k;
  #gzip_http_version 1.1;
  gzip_comp_level  2; # 压缩级别
  # 要压缩的mine类型
  gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss image/jpeg image/gif image/png image/svg+xml;
  gzip_vary     off;
  gzip_proxied    expired no-cache no-store private auth;
  gzip_disable    "MSIE [1-6]\."; # IE6不支持gzip
  ...
}

nginx gzip의 경우 관련 정보를 다음을 통해 확인하세요. 스스로

nginx 서비스를 다시 시작한 다음 효과를 살펴보세요.

서버의 리소스는 gzip 압축 후 9kb, 압축률은 13.3%인 것을 확인할 수 있습니다.

요약

이 시점에서 예비 최적화가 완료되었습니다. 실제 프로젝트의 첫 화면 로딩 시간은 약 12초에서 약 4초로 최적화되었습니다. 데모 프로젝트이고 다른 페이지와 기능이 개발되지 않았기 때문에 효과가 그다지 뚜렷하지 않습니다. 우리 모두는 더 나은 솔루션을 갖고 있으며 그로부터 함께 배울 수 있습니다!

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Vue의 SPA 첫 번째 화면 로딩 최적화(자세한 튜토리얼)

관련 기사