집 > 기사 > 웹 프론트엔드 > Vue가 CDN을 사용하여 첫 번째 화면 로딩을 최적화하는 방법

Vue가 CDN을 사용하여 첫 번째 화면 로딩을 최적화하는 방법

php中世界最好的语言원래의: 2018-04-11 13:49:163498검색

이번에는 Vue가 CDN을 사용하여 첫 화면 로딩을 최적화하는 방법을 보여드리겠습니다. Vue가 CDN을 사용하여 첫 화면 로딩을 최적화하는 주의 사항은 무엇입니까?

Vue 프로젝트에서 프로젝트에 도입된 모든 js 및 css 파일은 컴파일 중에 Vendor.js로 패키징됩니다. 브라우저는 파일을 로드한 후에만 첫 번째 화면 표시를 시작할 수 있습니다. 많은 라이브러리가 도입되면 Vendor.js 파일의 크기가 상당히 커져 초기 열기 환경에 영향을 미칩니다.

해결책은 에서 참조하는 외부 js 및 css 파일을 분리하여 Vendor.js로 컴파일하지 않고 리소스 형식으로 참조하는 것입니다. 이러한 방식으로 브라우저는 여러 스레드를 사용하여 Vendor.js를 비동기적으로 컴파일할 수 있습니다. 및 외부 파일.js 등이 로드되어 첫 번째 열기를 가속화합니다.

외부 라이브러리 파일은 CDN 리소스나 기타 서버 리소스를 사용할 수 있습니다.

다음으로 처리 흐름을 설명하기 위해 vue, vuex 및 vue-router의 소개를 예로 들어 보겠습니다.

1. 리소스 소개

index.html에서

bootstrap:

<body>
  <p id="app"></p>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.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/vuex/3.0.1/vuex.min.js"></script>
 </body>

과 같은 CDN 리소스를 추가합니다.

2. 구성 추가

bulid/webpack.base.conf.js 파일에서 다음과 같이 외부 항목을 추가하고 참조된 외부 모듈을 가져옵니다.

참고:

형식은 'aaa' : 'bbb'입니다. 여기서 aaa는 가져올 리소스의 이름을 나타내고 bbb는 해당 라이브러리에서 사용자 정의한 외부 참조용 모듈에서 제공하는 이름을 나타냅니다. 예를 들어 vue는 Vue이고, vue-router는 VueRouter입니다.

3. 원래 따옴표를 제거하세요

module.exports = {
 entry: {
  app: './src/main.js'
 },
 externals:{
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex':'Vuex'
 }

와 같은 가져오기를 제거하세요. 다음과 같은 Vue.use(XXX)를 제거하세요:

// import Vue from 'vue'
// import Router from 'vue-router'

Test

npm 실행 빌드를 다시 실행하면 Vendor.js의 크기가 줄어든 것을 확인할 수 있습니다. 개발자 모드 Network 도구를 통해 vue.js, vuex.js, Vendor.js 등의 파일이 각각 하나의 스레드로 로드되는 것을 확인할 수 있습니다. 그리고 CDN을 사용하기 때문에 로딩 속도는 자체 서버보다 빠릅니다.

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