使用React.lazy进行webpack代码分割的调试方法
<p>我正在使用<code>React.lazy</code>尝试将一些代码从我的主应用程序中拆分出来,但它没有按照我期望的方式工作,我很难弄清楚如何调试。</p>
<p>我的代码大致如下:</p>
<pre class="brush:php;toolbar:false;">// index.js
import React from 'react';
import { LibraryUtils } from './library/utils';
const Component = React.lazy(() => import('./component'));
...
// component.js
import React from 'react';
import LibraryComponent from './library/component';
...</pre>
<p>我想要的是:</p>
<ul>
<li>vendors.chunk.js:反应</li>
<li>main.chunk.js:index.js</li>
<li>main-1.chunk.js:组件.js</li>
<li>library-0.chunk.js:库/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>
<li>vendors.chunk.js:反应</li>
<li>main.chunk.js:index.js + component.js</li>
<li>library.chunk.js:库/utils + 库/组件</li>
<li>index.html:main.chunk.js、library.chunk.js、vendors.chunk.js</li>
<li>异步块:无</li>
</ul>
<p>因此,我的初始页面加载需要加载所有的JS,从而导致性能较差。</p>
<p>我如何强制webpack将<code>library</code>拆分成多个块,以便我可以利用异步块?更好的是,我如何调试这样的问题?</p>
<p>我的配置大致如下:</p>
<pre class="brush:php;toolbar:false;">splitChunks: {
chunks: 'all',
cacheGroups: {
library: {
test: /[\\/]library[\\/]/,
},
},
}</pre></p>