1、require.ensure() 方法來實現代碼打包分離
require.ensure() 是 webpack 特有的，已經被 import() 取代。
require.ensure( dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String ) 給定 dependencies 參數，將其對應的文件拆分到一個單獨的 bundle 中，此 bundle 會被異步加載。 當使用 CommonJS 模塊語法時，這是動態加載依賴的惟一方法。 意味着，能夠在模塊執行時才運行代碼，只有在知足某些條件時才加載依賴項。 這個特性依賴於內置的 Promise。若是想在低版本瀏覽器使用 require.ensure， 記得使用像 es6-promise 或者 promise-polyfill 這樣 polyfill 庫， 來預先填充(shim) Promise 環境。
var a = require('normal-dep');
if ( module.hot ) {
require.ensure(['b'], function(require) {
var c = require('c');
// Do something special...
});
}
按照上面指定的順序，webpack 支持如下參數：
dependencies：字符串構成的數組，聲明callback回調函數中所需的全部模塊。callback：只要加載好所有依賴，webpack 就會執行此函數。require函數的實現，做爲參數傳入此函數。當程序運行須要依賴時，可使用require()來加載依賴。函數體可使用此參數，來進一步執行require()模塊。errorCallback：當 webpack 加載依賴失敗時，會執行此函數。chunkName：由require.ensure()建立出的 chunk 的名字。經過將同一個chunkName傳遞給不一樣的require.ensure()調用，咱們能夠將它們的代碼合併到一個單獨的 chunk 中，從而只產生一個瀏覽器必須加載的 bundle。
雖然咱們將 require 的實現，做爲參數傳遞給回調函數，然而若是使用隨意的名字，
例如 require.ensure([], function(request) { request('someModule'); })
則沒法被 webpack 靜態解析器處理，因此仍是請使用 require，例如 require.ensure([], function(require) { require('someModule'); })。
2、在vue中使用import()來代替require.ensure()實現代碼打包分離
有時候咱們想把某個路由下的全部組件都打包在同個異步塊 (chunk) 中。
只須要使用 命名 chunk，一個特殊的註釋語法來提供 chunk name (須要 Webpack > 2.4)。
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') Webpack 會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中。
例：require.ensure()實現
const notFound = r => require.ensure([], () => r(require('@views/common/404')), 'index')
const login = r => require.ensure([], () => r(require('@views/common/login')), 'index')
const register = r => require.ensure([], () => r(require('@views/common/register')), 'index')
const main = r => require.ensure([], () => r(require('@views/main')), 'index')
const myWorks = r => require.ensure([], () => r(require('@views/my/index')), 'my')
const myAccountSetting = r => require.ensure([], () => r(require('@views/my/account-setting')), 'my')
const makeIndex = r => require.ensure([], () => r(require('@views/make/index')), 'make')
例：import()實現
const notFound = () => import(/* webpackChunkName: "index" */ '@views/common/404') const login = () => import(/* webpackChunkName: "index" */ '@views/common/login') const register = () => import(/* webpackChunkName: "index" */ '@views/common/register') const main = () => import(/* webpackChunkName: "index" */ '@views/main') const myWorks = () => import(/* webpackChunkName: "my" */ '@views/my/index') const myAccountSetting = () => import(/* webpackChunkName: "my" */ '@views/my/account-setting') const makeIndex = () => import(/* webpackChunkName: "make" */ '@views/make/index')