update

Author: iSpring

tutorials/webpack-code-splitting/README.md

@@ -1,6 +1,6 @@
 # Webpack Code Splitting
 
-对于大型Web项目来说，把所有代码打包成一个JavaScript文件并不明智，因为这会导致生成的`bundle.js`非常庞大，需要花费更多的时间来加载它，导致用户体验下降。本文将介绍Webpack强大的代码分离(Code Splitting)功能，通过该特性我们可以将一个`bundler.js`文件拆分为多个chunk文件，实现在运行时按需异步加载相关资源。本文将从chunk的角度讲解Webpack的代码分离特性。
+对于大型Web项目来说，把所有代码打包成一个JavaScript文件并不明智，因为这会导致生成的`bundle.js`非常庞大，需要花费更多的时间来加载它，导致用户体验下降。本文将介绍Webpack强大的代码分离(Code Splitting)功能，通过该特性我们可以将一个`bundle.js`文件拆分为多个chunk文件，实现在运行时按需异步加载相关资源。本文将从chunk的角度讲解Webpack的代码分离特性。
 
 项目目录结构如下所示：
 ```
@@ -43,7 +43,9 @@ module.exports = "module d";
 
 如上所示，`a.js`、`b.js`、`c.js`、`d.js`这四个文件都是普通的CommonJS模块。
 
-`page1.js`文件如下所示：
+
+## entry chunk
+`page1.js`中引入了`a.js`和`b.js`模块，如下所示：
 ```
 import a from "./a.js";
 import b from "./b.js";
@@ -52,7 +54,7 @@ console.log("module a: ", a);
 console.log("module b: ", b);
 ```
 
-`page2.js`文件如下所示：
+`page2.js`中引入了`c.js`和`d.js`模块，如下所示：
 ```
 import c from "./c.js";
 import d from "./d.js";
@@ -61,6 +63,19 @@ console.log("module c: ", c);
 console.log("module d: ", d);
 ```
 
+`chunk`，英文直译过来是`数据块`的意思，我们可以把一个`chunk`看做是一个文件，这个文件里可以包含一个或多个模块（比如a.js、b.js等）。
+
+`chunk`总的来说可以分为`entry chunk`和`normal chunk`，`normal chunk`指的就是`non-entry chunk`。
+
+我们首先看一下最简单的`entry chunk`。
+
+### string entry
+
+### array entry
+
+### object entry
+
+## normal chunk
 `page3.js`文件如下所示：
 ```
 import a from "./a.js";
@@ -75,8 +90,4 @@ require.ensure(["./c.js", "./d.js"], function(){
   console.log("module c: ", c);
   console.log("module d: ", d);
 }, "cd");
-```
-
-## entry chunk
-
-## normal chunk
+```