关于webpack代码拆分的解析

最近在学习VUE的时候接触到了webpack，今天就留个小笔记，介绍一下webpack代码拆分

如果利用 webpack 将项目中的所有代码打包在一起，很多时候是不适用的，因为代码中有些东西我们总是希望将其拆分出来。比如：

样式表，希望利用 link 标签引入 使用概率较低的模块，希望后期需要的时候异步加载 框架代码，希望能利用浏览器缓存下部分不易变动的代码

下面是我在阅读 webpack 的官方文档时候，记录的一些笔记，部分地方使用了自己的话来讲，力图让它显得更易懂。

按需加载拆分

webpack 可以帮助我们将代码分成不同的逻辑块，在需要的时候加载这些代码。

使用 require.ensure() 来拆分代码

require.ensure() 是一种使用 CommonJS 的形式来异步加载模块的策略。在代码中通过 require.ensure([<fileurl>]) 引用模块，其使用方法如下：

代码如下:
require.ensure(dependencies: String[], callback: function(require), chunkName: String)

第一个参数指定依赖的模块，第二个参数是一个函数，在这个函数里面你可以使用 require 来加载其他的模块，webpack 会收集 ensure 中的依赖，将其打包在一个单独的文件中，在后续用到的时候使用 jsonp 异步地加载进去。

require.ensure(['./a'], function(require){  let b = require('./b');  let a = require('./a');  console.log(a+b)});

以上代码，a 和 b 会被打包在一起，在代码中执行到这段代码的时候，会异步地去加载，加载完成后执行函数里面的逻辑。

let a = require('./a');require.ensure(['./a'], function(require){  let b = require('./b');  console.log(a+b)});

如果这样写，那么 a 不会和 b 打包在一起，因为 a 已经被打包在主代码中了。

require.ensure(['./c'], function(require){  let a = require('./a');  console.log(a)});require.ensure(['./c'], function(require){  let b = require('./b');  console.log(b)});

以上代码中两个模块都依赖了 c 模块，这个时候会拆分出两个模块，其中都包含了 c 模块，因为在实际运用中，以上两个 require.ensure 的执行顺序不确定，执行与否也不确定，因此需要将 c 模块都打包进去。

require.ensure 还可以传入第三个参数，这个参数用来指定打包的包名，对于上面这种情况，c 模块被打包入了两个包中，如果事先明确这两个包都会被使用，那么不妨将这两个包合并为一个，这样就不会有 c 模块被打包两次的问题了，所以可以将 chunkName 指定为同一个名字。

require.ensure(['./c'], function(require){  let a = require('./a');  console.log(a)}, 'd');require.ensure(['./c'], function(require){  let b = require('./b');  console.log(b)}, 'd');