팁, 압축 없이 빌드 설정을 지정하면 내부 코드가 어떻게 보이는지 확인할 수 있습니다.

귀하의 레이블에는 vue라고 되어 있는데, 제가 접한 vue 데모에서 이에 대해 이야기해 보겠습니다. 우선 vue 프로젝트는 vue를 사용해야 하고, 두 번째로는 프로젝트 페이지의 js, 즉 vue를 인스턴스화하고 비즈니스를 작성하는 방법입니다.

기존 jquery 개발 모델인 경우 페이지에는 jquery용 j와 페이지 비즈니스용 j가 각각 2개 이상 포함되어 있어야 합니다.

앱, 공급업체, 매니페스트로 돌아가서 이전 vue 스캐폴딩의 웹팩 구성을 게시하세요

app.js는 js 항목이고, Vendor는 공용 모듈 플러그인(웹팩 자체의 모듈 코드 부분)을 추출하여 추출한 코드 블록이며, 매니페스트는 Vendor를 기반으로 한 후 필요한 부분을 추출합니다. js 모듈의 비동기 로딩에 대한 내용과 같이 자주 변경됩니다.

스크린샷에서도 알 수 있듯이 vue 프레임워크 전체의 코드와 webpack의 모듈식 코드가 포함되어 있어서 벤더 파일 크기가 가장 큽니다.

매니페스트의 경우 주로 비동기 로딩(스크립트를 생성하여 js를 동적으로 도입)의 일부 구현 방법이 포함되며 내용에는 비동기 js의 파일 이름과 경로가 포함됩니다.

이전에 몇 가지 정보를 확인했는데, 주된 이유는 js 변경이 비동기 로딩에서 js 파일 이름을 변경하고 자주 변경된다는 것입니다. 상대적으로 vue 라이브러리와 같은 코드는 한 번만 패키지하면 됩니다. 벤더가 되면 js를 자주 변경하면 벤더가 반복적으로 컴파일을 하게 되는데, 이는 좀 낭비가 되기 때문에 반복적으로 변경되는 부분을 매니페스트 파일로 추출하게 됩니다.

개인적인 이해이니 궁금한 점 있으시면 정정해주세요

@Dont가 말한 대부분은 정확하지만 변경해야 할 몇 가지 사항이 있습니다. 1. CommonsChunkPlugin은 "자주 변경되는 부분" 대신 public 부분을 추출합니다. 2. 관찰 잠시 후 webpack은 의 마지막 CommonsChunkPlugin이 생성한 청크에 webpackJsonp의 정의와 비동기 로딩과 관련된 정의를 삽입해야 하며, 여기에는 모든 항목과 청크가 포함됩니다. md5에서는 "자주 변경"됩니다. 동시에 vue-cli의 기본 공급업체는 프로덕션 환경에서 매우 큰 node_module 아래에 모든 종속성을 패키징하는 것입니다. , 지나치게 큰 파일의 로딩 속도를 높이려면 캐시를 최대한 많이 사용해야 합니다. 그러나 "잦은 변경"은 캐싱에 도움이 되지 않으므로 항목의 변경 사항을 격리하기 위해(여기서는 앱으로 간주할 수 있습니다.) Node.js) 공급업체 외부에서 vue-cli는 공급업체 청크 뒤에 추가 매니페스트를 만들어 node_modules에 새 패키지를 도입하지 않는 한 항목이 공급업체에 영향을 주지 않습니다. 실제로 컴파일 수와는 아무런 관련이 없습니다. 모든 파일은 패키징될 때마다 다시 컴파일됩니다. 대용량 파일, 캐싱, 변경된 코드 분할.

다음 지침은 vue-cli 제품군 버킷의 기본 구성에 따라서만 해석됩니다. 오류가 있는 경우 지적해 주세요.
app.js: 기본적으로 실제로는 app.vue입니다. (.vue 또는 .js?) 이 페이지 없이는 실행할 수 없습니다.
vendor.js: vue-cli 제품군 버킷의 기본 구성에 있는 이 청크는 모든 node_modules/에서 필요한 종속성(가져오기) 여기서는 node_modules/
manifest.js 아래의 모든 필수(가져오기) js 파일입니다. 마지막 청크에는 webpackJsonp 정의 및 비동기 로딩과 관련된 정의가 주입됩니다( webpack은 모듈 관리를 처리하기 위해 CommonsChunkPlugin을 호출합니다. 핵심이므로 먼저 로드해야 하며 그렇지 않으면 오류가 보고됩니다.

단순화: 기본 공급업체 패키징 전략으로 인해 이 청크는 매우 큽니다. 기본 구성에 따르면 이를 간소화하려면 기본적으로 각 패키징 전략을 수정해야 합니다. 실제 프로젝트에 따른 덩어리(패키지 크기를 줄여보세요) 첫 화면 로딩 속도를 높이기 위해)

최적화: 단일 페이지는 기본적으로 합리화와 동일합니다. 여러 페이지가 있는 경우 공급업체의 패키징 전략을 맞춤화하는 것이 결국 모든 페이지가 타사 종속성을 전부 사용하는 것은 아닙니다. .벤더의 크기를 적절히 줄이면 로딩 속도가 많이 향상될 수 있습니다.