webpack ——代码分割ensure

require.ensure 异步加载（代码切割）
 把js模块给独立导出一个.js文件，然后使用这个模块的时候，
 webpack会构造script dom元素，由浏览器发起异步请求这个js文件。

 

mapBtn.click(function() {
 require.ensure([], function() {
 var baidumap = require('./baidumap.js') //baidumap.js放在我们当前目录下
 })
 })

分析: require.ensure这个函数是一个代码分离的分割线，表示 回调里面的require 是我们想要进行分割出去的，即require(’./baidumap.js’)，把baidumap.js分割出去，形成一个 webpack打包的单独js文件。当然ensure里面也是可以写一些同步的require的，比如

var sync = require('syncdemo.js')   //下面ensure里面也用到
 mapBtn.click(function() {
 require.ensure([], function() {
 var baidumap = require('./baidumap.js') //baidumap.js放在我们当前目录下
 var sync = require('syncdemo.js')  //这个不会独立出去，因为它已经加载到模块缓存中了
 })
 })

ensure的第一个参数[] 是它依赖的异步模块的数组；第二个参数为回调函数，第三个参数为模块名，用于构建时生成文件名使用。
注意：require.ensure模块只会被下载下来不会被执行，只有当回调函数使用require时这个模块才会被执行

实例：

//同步加载：util-sync是立即马上依赖的工具箱。但是它又非常的大，所以将其配置打包成一个公共模块， 利用浏览器的并发加载，加快下载速度
 var util_sync = require('./util-sync.js')

 alert(util_sync.data)

 document.getElementById("aBtn").onclick = function() {

 require.ensure([], function() {
 //workA-async不是entry.js必须有的，即可能发生的操作，那么我们把 他们利用异步加载，当发生的时候再去加载就行了
 var awork = require('./workA-async.js')
 alert(awork.data)
 //异步里面再导入同步模块--实际是使用同步中的模块
 var util1 = require('./util-sync.js')
 })
 }

 document.getElementById("bBtn").onclick = function() {

 require.ensure([], function() {
 var bwork = require('./workB-async.js')
 alert(bwork.data)
 })
 }