webpack ensure相信大家都聽過。有人稱它為非同步載入，也有人說做程式碼切割，那這
個傢伙到底是用來幹嘛的？其實說白了，它就是把js模組給獨立匯出一個.js檔案的，然後使用這個
模組的時候，webpack會構造script dom元素，由瀏覽器發起非同步請求這個js檔案。
場景分析:

比如應用的首頁裡面有個按鈕，點選後可以開啟某個地圖。開啟地圖的話就要利用百度地圖的js,於是
我們不得不在首頁中把百度地圖的js一起打包進去首頁,一個百度地圖的js檔案是非常大的，假設為1m，於是就造成了我們首頁打包的js非常大，使用者開啟首頁的時間就比較長了。
有沒有什麼好的解決方法呢？

解決1

既然打包成同一個js非常大的話，那麼我們完全可以把百度地圖js分類出去，利用瀏覽器的併發請求
js檔案處理，這樣的話，會比載入一個js檔案時間小得多。嗯，這也是個不錯的方案。為baidumap.js
配置一個新的入口就行了，這樣就能打包成兩個js檔案，都插入html即可（如果baidumap.js被多個
入口檔案引用的話，也可以不用將其設定為入口檔案，而且直接利用CommonsChunkPlugin,匯出到一個
公共模組即可）可以參考我之前文章
webpack模組打包
那還有沒有更好的解決方案呢？
解決2

當然還是有的！我們細想，百度地圖是使用者點選了才彈出來的，也就是說，這個功能是可選的。那麼解決
方案就來了，能不能在使用者點選的時候，我在去下載百度地圖的js.當然可以。那如何實現使用者點選的時候
再去下載百度地圖的js呢？於是，我們可以寫一個按鈕的監聽器

mapBtn.click(function() {
//獲取 文件head物件
var head = document.getElementsByTagName(‘head’)[0];
//構建 script
var script = document.createElement(‘script’);
//設定src屬性
script.async = true;
script.src = “http://map.baidu.com/.js”
//加入到head物件中
head.appendChild(script);
})
上面的幾行程式碼對大家來說都不難。可以在點選的時候，才載入百度地圖，等百度地圖載入完成後，在
利用百度地圖的物件去執行我們的操作。ok，講到這裡webpack.ensure的原理也就講了一大半了。
它就是 把一些js模組給獨立出一個個js檔案，然後需要用到的時候，在建立一個script物件，加入
到document.head物件中即可，瀏覽器會自動幫我們發起請求，去請求這個js檔案，在寫個回撥，去
定義得到這個js檔案後，需要做什麼業務邏輯操作。
ok,那麼我們就利用webpack的api去幫我們完成這樣一件事情。點選後才進行非同步載入百度地圖js，上面
的click載入js時我們自己寫的，webpack可以輕鬆幫我們搞定這樣的事情，而不用我們手寫
mapBtn.click(function() {
require.ensure([], function() {
var baidumap = require(‘./baidumap.js’) //baidumap.js放在我們當前目錄下
})
})
搞定！當然還是分析一下。require.ensure這個函式是一個程式碼分離的分割線，表示 回撥裡面的require
是我們想要進行分割出去的，即require(’./baidumap.js’)，把baidumap.js分割出去，形成一個
webpack打包的單獨js檔案。
文章來源：