저는 리소스 번들을 위해 webpack을 사용하는 AngularJS 앱에서 작업하고 있습니다. 현재 CSS가 포함 된 app.js 파일 하나를 만들고 있습니다. app.js의 크기는 약 6MB입니다. app.js를 여러 개의 청크로 나누면 페이지 성능이 향상됩니다. 우리 동료가 하나의 JS 파일을 2 또는 3 개로 나누면 페이지로드 시간이 두 배 또는 세 배 증가 할 것이라고 내 동료가 확신합니다. 정말 사실입니까? 하나의 파일을 여러 개 갖는 것이 더 좋은 곳을 읽었던 것을 기억합니다. 나는 지금 그 이유를 정말로 기억하지 못한다. 페이지 성능을 위해 app.js 파일을 깨야하나요? 또는 여기에 적용 할 수있는 다른 옵션은 무엇입니까?anglejs 앱의 초기 페이지로드 성능
거대한 JS 파일을 여러 파일로 분리하여 성능이 실제로 향상되는지 여부를 확인하기 위해 Chrome (Mac 54.0.2840.98 (64 비트))에서 실질적인 테스트를 수행했습니다. 나는 10MB의 js 파일을 만들고 그것을 3 부 만들었다. 3 개의 파일을 모두 연결하여 30MB 파일을 만들었습니다. 나는 페이지 하단의 일반적인 스크립트 태그를 사용하여 참조되는 단일 파일에 대해 걸린 시간을 측정했으며 약 1 분이 소요되었습니다. 그런 다음 3 개의 10MB 스크립트 파일을 차례로 참조했으며 모든 것을로드하는 데 거의 20 초가 걸렸습니다. 거대한 JS 파일을 여러개의 파일로 나누는 것이 실제로 성능 향상입니다. 그러나 아니오에 한계가 있습니다. 브라우저가 병렬로 다운로드 할 수있는 파일
단일 파일은 일반적으로 더 나은 성능을 의미합니다. 또한이 파일이 브라우저 사이드에서 적절하게 캐시되고 웹 서버에서 서비스 할 때 gzip으로 처리해야합니다.
하나의 파일이 더 적은 연결 (즉, 오버 헤드가 적음)이 필요하기 때문에 더 좋지만 실제로는 < 개의 파일 5 개를 말하는 경우에는 무시해도됩니다. 파일의 일부분을 분할 할 때 파일을 개별적으로 캐시 할 수있는 능력을 얻습니다. 이는 대개의 경우 큰 이점입니다. 따라서 논리적으로 캐시 할 수있는 섹션 (예 : 공급 업체 코드 및 맞춤 코드)으로 파일을 분할하는 것이 좋습니다.
또한 클라이언트와 서버가 http/2를 지원하면 http/2가 연결 재사용을 지원하므로 더 적은 연결 이유도 사라집니다.
초기로드 시간에는 실제 차이가 없으므로 모든 파일을 다운로드해야하므로 유의하시기 바랍니다.