Vue에서 CDN 최적화를 사용하는 방법

이 글에서는 주로 Vue 프로젝트에서 CDN 최적화를 사용하는 방법을 소개하고 참고하겠습니다.

저희 프로젝트 작성에서는 최적화 문제를 무시할 수 없습니다. 특히 첫 번째 화면 최적화는 cdn 및 비동기 로딩의 두 가지 최적화 방법을 참조하세요. //www.jb51. htm

1. cdn

먼저 cdn이 무엇인가요? Baidu 여러분

그 기능은 페이지를 로드할 때 필요한 종속성 중 일부를 현재 세션에 로드한 다음 실행을 시작해야 한다는 것입니다. 첫 화면, 모듈이 많아 대기시간도 길어지고. 브라우저 메모리는 최대 40개의 프로세스를 실행할 수 있습니다. 다음 코드를 실행하기 전에 이전 프로세스가 로드될 때까지 기다려야 합니다. CDN을 사용하여 일부 타사 리소스를 도입하면 서버에 대한 부담을 줄일 수 있습니다. 우리의 압력을 나누기 위해 다른 서버에 포인트를 제공합니다. 다음은 코드의 구체적인 구현입니다.

(1) 첫 번째는 리소스를 소개하는 것입니다. 부트스트랩에서 제공하는 리소스는 여기에서 사용됩니다. URL: http://www. .bootcdn.cn/
vue가 맨 위에 있습니다. 다음과 같이 외부 index.js 파일에 도입합니다.

<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>

그럼 프로젝트에서 변경해야 할 것은 bulid 폴더 아래의 webpack.base.conf.js 파일입니다. 변경된 장소는

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

여기서 vue를 변경해야 하며 vue -router는 전역 사용을 위해 공개됩니다. 여기서 소문자 vue와 vue-router는 리소스를 소개할 때 해당하는 이름입니다. 물론 이 두 이름은 동일할 수 있습니다. 다음 단계는 해당 리소스가 프로젝트에서 참조되는 원래 도입 방법, 즉 원래 도입한 방법을 제거하는 것입니다. 예를 들어, main.js 및 라우터 폴더의 index.js를 수정하세요.

// import Vue from 'vue'

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

참고 라우터 폴더의 index.js를 수정하세요

export default new VueRouter({
 // modes: 'history',
 routes: [
  {
   path: '/',
   redirect: '/main/home'
  },

여기서는 위의 수정이 필요하지 않을 수도 있다는 점에 유의하세요. 이것은 단지 지식을 기록하기 위한 것입니다. 마음에 들지 않으면 댓글을 달지 마세요

위 내용은 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JavaScript에서 NaN을 판단하는 방법

jQuery를 사용하여 마우스 반응 투명 그라데이션 애니메이션 효과를 구현하는 방법

jQuery에서 마우스 반응 Taobao 애니메이션 효과를 구현하는 방법

자세한 해석 vue-admin과 백엔드(flask)의 분리 및 결합

기본 구성에 대해서는 Vue+webpack

nodejs+express 환경에서 다자간 채팅방 구축하는 방법

vue2.0 사용 방법 프런트 엔드 별 등급 기능 구성 요소 구현

위 내용은 Vue에서 CDN 최적화를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!