집 > 기사 > 웹 프론트엔드 > CDN을 사용하여 프로젝트 로딩 속도를 최적화하는 방법

CDN을 사용하여 프로젝트 로딩 속도를 최적화하는 방법

php中世界最好的语言원래의: 2018-06-12 10:46:582364검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!