CDN은 첫 번째 화면 로딩 속도를 최적화합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

php中世界最好的语言

Apr 20, 2018 pm 02:59 PM

최적화 짐 속도

이번에는 첫 화면 로딩 속도를 최적화하는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7465

Cakephp 튜토리얼

1376

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

심층 해석: Laravel이 달팽이처럼 느린 이유는 무엇입니까? Mar 07, 2024 am 09:54 AM

Laravel은 널리 사용되는 PHP 개발 프레임워크이지만 달팽이처럼 느리다는 비판을 받기도 합니다. Laravel의 만족스럽지 못한 속도의 정확한 원인은 무엇입니까? 이 기사에서는 Laravel이 달팽이처럼 느린 이유를 여러 측면에서 심층적으로 설명하고 이를 특정 코드 예제와 결합하여 독자가 이 문제를 더 깊이 이해할 수 있도록 돕습니다. 1. ORM 쿼리 성능 문제 Laravel에서 ORM(Object Relational Mapping)은 매우 강력한 기능입니다.

Golang의 gc 최적화 전략에 대한 토론 Mar 06, 2024 pm 02:39 PM

Golang의 가비지 수집(GC)은 항상 개발자들 사이에서 뜨거운 주제였습니다. 빠른 프로그래밍 언어인 Golang에 내장된 가비지 컬렉터는 메모리를 매우 잘 관리할 수 있지만, 프로그램의 크기가 커질수록 일부 성능 문제가 발생하는 경우가 있습니다. 이 기사에서는 Golang의 GC 최적화 전략을 살펴보고 몇 가지 구체적인 코드 예제를 제공합니다. Golang의 가비지 수집 Golang의 가비지 수집기는 동시 마크 스윕(concurrentmark-s)을 기반으로 합니다.

C++ 프로그램 최적화: 시간 복잡도 감소 기술 Jun 01, 2024 am 11:19 AM

시간 복잡도는 입력 크기를 기준으로 알고리즘의 실행 시간을 측정합니다. C++ 프로그램의 시간 복잡성을 줄이는 팁에는 데이터 저장 및 관리를 최적화하기 위한 적절한 컨테이너(예: 벡터, 목록) 선택이 포함됩니다. Quick Sort와 같은 효율적인 알고리즘을 활용하여 계산 시간을 단축합니다. 여러 작업을 제거하여 이중 계산을 줄입니다. 불필요한 계산을 피하려면 조건부 분기를 사용하세요. 이진 검색과 같은 더 빠른 알고리즘을 사용하여 선형 검색을 최적화합니다.

Laravel 성능 병목 현상 디코딩: 최적화 기술이 완전히 공개되었습니다! Mar 06, 2024 pm 02:33 PM

Laravel 성능 병목 현상 디코딩: 최적화 기술이 완전히 공개되었습니다! 인기 있는 PHP 프레임워크인 Laravel은 개발자에게 풍부한 기능과 편리한 개발 경험을 제공합니다. 그러나 프로젝트 규모가 커지고 방문 횟수가 늘어나면서 성능 병목 현상에 직면할 수도 있습니다. 이 기사에서는 개발자가 잠재적인 성능 문제를 발견하고 해결하는 데 도움이 되는 Laravel 성능 최적화 기술을 탐구합니다. 1. Eloquent 지연 로딩을 사용한 데이터베이스 쿼리 최적화 Eloquent를 사용하여 데이터베이스를 쿼리할 때 다음을 피하세요.

Laravel 성능 병목 현상 공개: 최적화 솔루션 공개! Mar 07, 2024 pm 01:30 PM

Laravel 성능 병목 현상 공개: 최적화 솔루션 공개! 인터넷 기술이 발전함에 따라 웹사이트와 애플리케이션의 성능 최적화가 점점 더 중요해지고 있습니다. 널리 사용되는 PHP 프레임워크인 Laravel은 개발 프로세스 중에 성능 병목 현상에 직면할 수 있습니다. 이 문서에서는 Laravel 애플리케이션이 직면할 수 있는 성능 문제를 살펴보고 개발자가 이러한 문제를 더 잘 해결할 수 있도록 몇 가지 최적화 솔루션과 특정 코드 예제를 제공합니다. 1. 데이터베이스 쿼리 최적화 데이터베이스 쿼리는 웹 애플리케이션의 일반적인 성능 병목 현상 중 하나입니다. 존재하다

기린 9000s 성능은 어떤가요? Mar 22, 2024 pm 03:21 PM

많은 주목을 받은 플래그십 휴대폰인 Kirin 9000s는 출시 이후 폭넓은 논의와 관심을 불러일으켰습니다. Kirin 9000 시리즈의 최신 플래그십 칩이 탑재되어 있어 성능이 매우 강력합니다. 그렇다면 기린 9000s의 성능은 어떨까? 함께 살펴보겠습니다. 우선 Kirin 9000s는 새로운 5nm 공정을 사용하여 제조되어 칩의 성능과 전력 소비 제어가 크게 향상되었습니다. 이전 Kirin 프로세서와 비교하여 Kirin 9000s는 성능이 크게 향상되었습니다. 대규모 게임 실행, 멀티태스킹 또는

WIN7 시스템의 시작 항목을 최적화하는 방법 Mar 26, 2024 pm 06:20 PM

1. 바탕화면에서 키조합(Win키 + R)을 눌러 실행창을 연 후, [regedit]를 입력하고 Enter를 눌러 확인하세요. 2. 레지스트리 편집기를 연 후 [HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer]를 클릭하여 확장한 다음 디렉터리에 Serialize 항목이 있는지 확인합니다. 없으면 탐색기를 마우스 오른쪽 버튼으로 클릭하고 새 항목을 생성한 다음 이름을 Serialize로 지정합니다. 3. 그런 다음 직렬화를 클릭한 다음 오른쪽 창의 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 새 DWORD(32) 비트 값을 만들고 이름을 Star로 지정합니다.

Vivox100s 매개변수 구성 공개: 프로세서 성능을 최적화하는 방법은 무엇입니까? Mar 24, 2024 am 10:27 AM

Vivox100s 매개변수 구성 공개: 프로세서 성능을 최적화하는 방법은 무엇입니까? 오늘날 급속한 기술 발전 시대에 스마트폰은 우리 일상생활에서 없어서는 안 될 부분이 되었습니다. 스마트폰의 중요한 부분인 프로세서의 성능 최적화는 휴대폰의 사용자 경험과 직접적인 관련이 있습니다. 주목받는 스마트폰인 Vivox100s의 매개변수 구성은 많은 관심을 끌었으며, 특히 프로세서 성능의 최적화는 사용자들의 많은 관심을 끌었습니다. 휴대폰의 "두뇌"인 프로세서는 휴대폰의 실행 속도에 직접적인 영향을 미칩니다.

See all articles

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

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제