Vue 패키징 사용시 벤더 파일이 너무 크거나 app.js 파일이 너무 큰 문제를 해결하는 방법

이 글은 Vue 패키징을 사용할 때 Vendor 파일이 너무 크거나 app.js 파일이 너무 큰 문제에 대한 해결책을 주로 소개합니다. 매우 좋고 필요한 친구들이 참고할 수 있습니다.

최초 사용자 vue2.0 개발에는 이전에 angle1.x를 사용했습니다. vue-cli 스캐폴딩(UI용 Element-ui)을 사용하여 패키징한 후 벤더 파일이 거의 1M에 달하는 매우 큰 것을 발견했습니다. . 나중에 정보를 읽은 후 webpack이 모든 라이브러리를 함께 패키지하여 파일이 매우 크다는 것을 깨달았습니다.

내 솔루션:

1. 자주 변경되지 않는 라이브러리를 index.html에 넣고 다음과 같이 cdn을 통해 가져옵니다.

그런 다음 build/webpack.base를 찾습니다. conf .js 파일에 다음 코드를 module.exports = { }

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'element-ui': 'ELEMENT',
 },

에 추가하면 webpack이 vue.js, vue-router, element-ui 라이브러리를 패키징하지 않습니다. main.js에서 요소의 도입부를 삭제했다고 선언하겠습니다. 그렇지 않으면 패키지된 app.css가 여전히 요소의 CSS를 패키지하고 삭제 후에 사라질 것이라는 것을 알았습니다.

그러면 패키징을 해보면 Vendor 파일이 훨씬 작다는 것을 알 수 있습니다~

아직 만족하지 못하셨다면 계속 읽어주세요...

2. vue 라우팅의 지연 로딩(특정 기능에 대해서는 공식 홈페이지는 여기입니다. 소개할 내용이 많지 않습니다.)

처음에는 다음과 같이 라우팅을 사용할 수 있습니다(router.js). 그러면 페이지에 진입할 때 모든 라우팅 리소스가 로드됩니다. 프로젝트가 클 경우 많은 콘텐츠가 로드되고 대기 시간이 발생합니다. 페이지가 길어져서 사용자 경험이 나빠질 수 있습니다.

경로를 모듈로 나누고, 새 페이지에 들어갈 때마다 해당 페이지에 필요한 리소스를 로드(즉, 경로를 비동기적으로 로드)하려면 다음과 같이 (router.js)를 사용하면 됩니다. :

그럼 패키징해 보면 1.xxxxx.js, 2.xxxxx.js 등이 훨씬 더 많고, Vendor.xxx.js는 사라지고 app.js만 남게 됩니다. 그리고 매니페스트.js와 app.js는 여전히 매우 작습니다. 여기서 제 가격은 100,000이 조금 넘습니다.

여기에서는 맵 파일을 생성하지 않았기 때문에 패키징 속도가 더 빠르고 전체 프로젝트 파일이 훨씬 작습니다(맵 파일은 일반적으로 매우 큽니다).

맵 파일 생성을 취소하고 구성을 찾으세요. /index.js, 그리고 아래 화살표를 수정합니다. false를 가리키기만 하면 됩니다.

이제 막 사용하기 시작했는데, 그 과정에서 우여곡절은 불가피합니다. 저도 많은 선배님들의 경험을 통해 배웠기 때문에 더 많은 분들께 도움이 되었으면 하는 마음으로 여기에 녹음하게 되었습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

vue 프로젝트를 패키징할 때 빈 페이지 문제를 해결하는 방법

HBulider를 통한 Vue 웹앱 프로젝트 패키징 네이티브 앱 소개

위 내용은 Vue 패키징 사용시 벤더 파일이 너무 크거나 app.js 파일이 너무 큰 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!