代碼分離特性能夠把代碼分離到不同的 bundle 中，然後可以按需加載或並行加載這些文件。代碼分離可以用於獲取更小的 bundle，以及控制資源加載優先級，如果使用合理，會極大影響加載時間。

有三種常用的代碼分離方法：

• 入口起點：使用 entry 配置手動地分離代碼。
• 防止重復：使用 CommonsChunkPlugin 去重和分離 chunk。
• 動態導入：通過模塊的內聯函數調用來分離代碼。

1. 入口起點(entry points)

這是迄今為止最簡單、最直觀的分離代碼的方式。不過，這種方式手動配置較多，並有一些陷阱，我們將會解決這些問題。先來看看如何從 main bundle 中分離另一個模塊：

正如前面提到的，這種方法存在一些問題:

• 如果入口 chunks 之間包含重復的模塊，那些重復模塊都會被引入到各個 bundle 中。
• 這種方法不夠靈活，並且不能將核心應用程序邏輯進行動態拆分代碼。

2. 防止重復(prevent duplication)

CommonsChunkPlugin 插件可以將公共的依賴模塊提取到已有的入口 chunk 中，或者提取到一個新生成的 chunk。讓我們使用這個插件，將之前的示例中重復的 lodash 模塊去除：

3. 動態導入(dynamic imports)

當涉及到動態代碼拆分時，webpack 提供了兩個類似的技術。對於動態導入，第一種，也是優先選擇的方式是，使用符合 ECMAScript 提案 的 import()

在我們開始本節之前，先從配置中移除掉多余的 entry 和 CommonsChunkPlugin，因為接下來的演示中並不需要它們：

src/index.js:

在註釋中使用了 webpackChunkName。這樣做會導致我們的 bundle 被命名為 lodash.bundle.js ，而不是 [id].bundle.js 。

webpack學習之—— Code Spliting(代碼分離)