在vue中使用import()來代替require.ensure()實現代碼打包分離

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')