<p><code>React.lazy</code>를 사용하여 기본 앱에서 일부 코드를 분리하려고 시도했지만 예상한 대로 작동하지 않아서 어떻게 해야 하는지 알아내는 데 어려움을 겪고 있습니다. 디버깅하세요. </p> <p>내 코드는 대략 다음과 같습니다.</p> <pre class="brush:php;toolbar:false;">// index.js '반응'에서 반응을 가져옵니다; import { LibraryUtils } from './library/utils'; const Component = React.lazy(() => import('./comComponent')); ... //컴포넌트.js '반응'에서 반응을 가져옵니다; './library/comComponent'에서 LibraryComponent를 가져옵니다. ...</pre> <p>내가 원하는 것은:</p>

<li>vendors.chunk.js:반응</li> <li>main.chunk.js:index.js</li> <li>main-1.chunk.js：comComponent.js</li> <li>library-0.chunk.js:library/utils</li> <li>library-1.chunk.js:라이브러리/컴포넌트</li> <li>index.html: main.chunk.js, library-0.chunk.js, Vendors.chunk.js</li> <li>비동기 청크: main-1.chunk.js, library-1.chunk.js</li> </ul> <p>내가 얻은 것은:</p>
<li>vendors.chunk.js:반응</li> <li>main.chunk.js:index.js + 컴포넌트.js</li> <li>library.chunk.js:library/utils + 라이브러리/구성요소</li> <li>index.html: main.chunk.js, library.chunk.js, Vendors.chunk.js</li>
• 비동기 블록: 없음
</ul> <p>결과적으로 초기 페이지 로드 시 모든 JS를 로드해야 하므로 성능이 저하됩니다. </p> <p>비동기 청크를 활용할 수 있도록 webpack이 <code>라이브러리</code>를 여러 청크로 강제로 분할하도록 하려면 어떻게 해야 하나요? 더 좋은 점은 이와 같은 문제를 어떻게 디버깅합니까? </p> <p>내 구성은 대략 다음과 같습니다.</p> <pre class="brush:php;toolbar:false;">분할청크: { 덩어리: '모두', 캐시그룹: { 도서관: { 테스트: /[\/]라이브러리[\/]/, }, }, }</pre></p>