<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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
문제는 노드 환경에서 동적 가져오기(비동기 로딩에 사용됨)를 일반 요구 사항으로 변환하여 비동기 블록이 생성되는 것을 방지하는
babel-plugin-dynamic-import-node가 예기치 않게 포함된다는 것입니다. 해결 방법은 이를 제거하는 것입니다(또는 단위 테스트를 실행할 때만 포함).