집 > 기사 > 웹 프론트엔드 > CDN은 첫 번째 화면 로딩 속도를 최적화합니다.

CDN은 첫 번째 화면 로딩 속도를 최적화합니다.

php中世界最好的语言원래의: 2018-04-20 14:59:301756검색

이번에는 첫 화면 로딩 속도를 최적화하는 CDN을 소개하겠습니다. 첫 화면 로딩 속도를 최적화하는 CDN의 주의 사항은 무엇인가요?

머리말

웹사이트 애플리케이션에서는 로딩 속도가 매우 중요합니다. 로딩 속도 중 하나는 요청 시 구성 요소 로딩과 같은 프로그램의 합리적인 배열이고, 다른 하나는 js, css 및 기타 리소스의 비동기 로딩입니다.

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

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

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

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

1. 리소스 소개

index.html에서 bootstrap와 같은 CDN 리소스를 추가합니다.

<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>

2. bulid/webpack.base.conf.js에 구성 추가

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

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

참고:

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

3. 원본 참조를 제거합니다.

가져오기를 제거합니다.

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

Vue.use(XXX)를 제거합니다.

// Vue.use(Router)

Test

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

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