<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>