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

一、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'); })。

二、在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')

原文連結