React.lazy를 이용한 웹팩 코드 분할 디버깅 방법
<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>
- 비동기 블록: 없음 </ul> <p>결과적으로 초기 페이지 로드 시 모든 JS를 로드해야 하므로 성능이 저하됩니다. </p> <p>비동기 청크를 활용할 수 있도록 webpack이 <code>라이브러리</code>를 여러 청크로 강제로 분할하도록 하려면 어떻게 해야 하나요? 더 좋은 점은 이와 같은 문제를 어떻게 디버깅합니까? </p> <p>내 구성은 대략 다음과 같습니다.</p> <pre class="brush:php;toolbar:false;">분할청크: { 덩어리: '모두', 캐시그룹: { 도서관: { 테스트: /[\/]라이브러리[\/]/, }, }, }</pre></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>
