摘要：澄清一個共同的誤解代碼分離不僅僅是抽出公共代碼把它們放進一個共享的塊中。讓我們來使用來移除這個重復的部分。插件將會注意到我們已經將分割成一個多帶帶的塊。并且從我們的主中刪除了這部分。

對于大型web app來說，如果把所有的文件都打包到一個文件中是非常低效的，特別是當一些代碼塊只在某些特定的條件下被調用。webpack可以讓你的代碼庫分割成不同的塊(chucks),僅僅在需要的時候再加載。其他的一些打包工具叫它們圖層（layers), 卷(rollups) 或者 片段（fragments),這些特性被叫做代碼分離（code splitting)。
這是一個可選的屬性。你可以在你的代碼庫中定義分割點。webpack能幫你管理好依賴，輸出文件和運行時。
澄清一個共同的誤解：代碼分離(code splitting)不僅僅是抽出公共代碼把它們放進一個共享的塊（chuck)中。更重要的特性是代碼分離（code splitting)可以將代碼分割成按需加載的塊。這可以使項目初始化的時候只需要加載很少的代碼，當應用請求的時候再按需加載代碼。
有三種常用的代碼分離方法:

入口起點: 使用entry選項手動分離代碼

防止重復: 使用 CommonsChuckPlugin 來去重和分離代碼

動態(tài)導入: 在模塊內部通過內聯函數來調用代碼

這是迄今為止最簡單,最直觀的拆分代碼的方式。但是它是比較偏向手動并且有一些陷阱需要我們去注意的?？匆豢次覀兪窃趺礃訌闹鱞uddle中分割其他模塊的。

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
  |- index.js
+ |- another-module.js
|- /node_modules

import _ from "lodash";

console.log(
  _.join(["Another", "module", "loaded!"], " ")
);

const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    index: "./src/index.js",
    another: "./src/another-module.js"
  },
  plugins: [
    new HTMLWebpackPlugin({
      title: "Code Splitting"
    })
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  }
};

這將會產生下面的build結果：

Hash: 309402710a14167f42a8
Version: webpack 2.6.1
Time: 570ms
            Asset    Size  Chunks                    Chunk Names
  index.bundle.js  544 kB       0  [emitted]  [big]  index
another.bundle.js  544 kB       1  [emitted]  [big]  another
   [0] ./~/lodash/lodash.js 540 kB {0} {1} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} {1} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} {1} [built]
   [3] ./src/another-module.js 87 bytes {1} [built]
   [4] ./src/index.js 216 bytes {0} [built]

還記得我們提到的那些陷阱嘛？

如果入口文件中有任何重復的模塊，它們都會被包含在這些入口文件中。

它是不靈活的并且不能用內在的應用邏輯來動態(tài)分割代碼。

這兩點中的第一點絕對是我們例子的中的問題。像lodash也在./src/index.js中被導入，所以它會在兩個bundle中重復。讓我們來使用CommonsChunkPlugin來移除這個重復的部分。

CommonsChunkPlugin插件允許我們抽出共同的依賴放在一個存在的入口chunk或者一個存在的new chunk里。讓我們使用這個插件去除上一個例子中重復的lodash依賴。

  const path = require("path");
 + const webpack = require("webpack");
  const HTMLWebpackPlugin = require("html-webpack-plugin");

  module.exports = {
    entry: {
      index: "./src/index.js",
      another: "./src/another-module.js"
    },
    plugins: [
      new HTMLWebpackPlugin({
        title: "Code Splitting"
 +     })
 +     }),
 +     new webpack.optimize.CommonsChunkPlugin({
 +       name: "common" // Specify the common bundle"s name.
 +     })
    ],
    output: {
      filename: "[name].bundle.js",
      path: path.resolve(__dirname, "dist")
    }
  };

在這里使用commonsChunkPlugin，我們將會看到重讀的依賴會從我們的index.bundle.js文件中移除。插件將會注意到我們已經將loadash分割成一個多帶帶的塊。并且從我們的主bundle中刪除了這部分。讓我們運行npm run bulid來看看它是否起作用了。

Hash: 70a59f8d46ff12575481
Version: webpack 2.6.1
Time: 510ms
            Asset       Size  Chunks                    Chunk Names
  index.bundle.js  665 bytes       0  [emitted]         index
another.bundle.js  537 bytes       1  [emitted]         another
 common.bundle.js     547 kB       2  [emitted]  [big]  common
   [0] ./~/lodash/lodash.js 540 kB {2} [built]
   [1] (webpack)/buildin/global.js 509 bytes {2} [built]
   [2] (webpack)/buildin/module.js 517 bytes {2} [built]
   [3] ./src/another-module.js 87 bytes {1} [built]
   [4] ./src/index.js 216 bytes {0} [built]

這里有一些社區(qū)提供的分割代碼的插件和加載器:

ExtractTextPlugin: 用來從主程序中分割出css

bundle-loader: 用來分離代碼并且懶加載結果bundles

Promise-loader: 和bundle-loader作用相同，但是它是使用promise
CommonsChunkPlugin使用explicit vendor chunks從核心應用代碼中來分離vendor模塊

當涉及到動態(tài)分割的時候，有兩種相似的技術被支持。第一個并且也是更完滿的方法是使用遵循ECMAScript規(guī)范的import語法來進行動態(tài)導入。更老的一種是，webpack特殊的方法require.ensure。讓我們來試一試使用第一種方法。
import調用使用promise，如果你想在不支持promise的老舊瀏覽器上使用，請引入一個promise polyfill。
在我們開始之前，讓我們移除這個多余的entry和commonsChunkPlugin 從我們的配置文件中。因為它們在接下來的教學中已經不再需要了。
webpack.config.js

 const path = require("path");
- const webpack = require("webpack");
  const HTMLWebpackPlugin = require("html-webpack-plugin");

  module.exports = {
    entry: {
+     index: "./src/index.js"
-     index: "./src/index.js",
-     another: "./src/another-module.js"
    },
    plugins: [
      new HTMLWebpackPlugin({
        title: "Code Splitting"
-     }),
+     })
-     new webpack.optimize.CommonsChunkPlugin({
-       name: "common" // Specify the common bundle"s name.
-     })
    ],
    output: {
      filename: "[name].bundle.js",
+     chunkFilename: "[name].bundle.js",
      path: path.resolve(__dirname, "dist")
    }
  };