翻译webpack3.5.5 - code splitting - 上半部分

摘要：澄清一个共同的误解代码分离不仅仅是抽出公共代码把它们放进一个共享的块中。让我们来使用来移除这个重复的部分。插件将会注意到我们已经将分割成一个多带带的块。并且从我们的主中删除了这部分。

对于大型web app来说，如果把所有的文件都打包到一个文件中是非常低效的，特别是当一些代码块只在某些特定的条件下被调用。webpack可以让你的代码库分割成不同的块(chucks),仅仅在需要的时候再加载。其他的一些打包工具叫它们图层（layers), 卷(rollups) 或者 片段（fragments),这些特性被叫做代码分离（code splitting)。
这是一个可选的属性。你可以在你的代码库中定义分割点。webpack能帮你管理好依赖，输出文件和运行时。
澄清一个共同的误解：代码分离(code splitting)不仅仅是抽出公共代码把它们放进一个共享的块（chuck)中。更重要的特性是代码分离（code splitting)可以将代码分割成按需加载的块。这可以使项目初始化的时候只需要加载很少的代码，当应用请求的时候再按需加载代码。
有三种常用的代码分离方法:

入口起点: 使用entry选项手动分离代码

防止重复: 使用 CommonsChuckPlugin 来去重和分离代码

动态导入: 在模块内部通过内联函数来调用代码

这是迄今为止最简单,最直观的拆分代码的方式。但是它是比较偏向手动并且有一些陷阱需要我们去注意的。看一看我们是怎么样从主buddle中分割其他模块的。

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]

还记得我们提到的那些陷阱嘛？

如果入口文件中有任何重复的模块，它们都会被包含在这些入口文件中。

它是不灵活的并且不能用内在的应用逻辑来动态分割代码。

这两点中的第一点绝对是我们例子的中的问题。像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]

这里有一些社区提供的分割代码的插件和加载器:

ExtractTextPlugin: 用来从主程序中分割出css

bundle-loader: 用来分离代码并且懒加载结果bundles

Promise-loader: 和bundle-loader作用相同，但是它是使用promise
CommonsChunkPlugin使用explicit vendor chunks从核心应用代码中来分离vendor模块

当涉及到动态分割的时候，有两种相似的技术被支持。第一个并且也是更完满的方法是使用遵循ECMAScript规范的import语法来进行动态导入。更老的一种是，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")
    }
  };