이번에는 첫 화면 로딩 속도를 최적화하는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
JSON을 사용하여 서버에 데이터를 제출하는 방법에 대한 자세한 단계별 설명
위 내용은 CDN은 첫 번째 화면 로딩 속도를 최적화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!