Vue路由組件按需加載的幾種方法

1. 普通加載

• 使用vue-cli構建項目後，咱們會在Router文件夾下面的index.js裏面引入相關的路由組件,如：

import Hello from '@/components/Hello'
import Boy from '@/components/Boy'
import Girl from '@/components/Girl'
複製代碼

• 這樣作的結果就是webpack在npm run build的時候會打包成一個整個的js文件，若是頁面一多，會致使這個文件很是大，加載緩慢，爲了解決這個問題，須要將他分紅多個小文件，並且還要實現異步按需加載，即用到了再加載，而不用一股腦所有加載

2. webpack的require.ensure()實現按需加載

• 語法：require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
  • dependencies：字符串構成的數組，聲明 callback 回調函數中所需的全部模塊,模塊做爲依賴被加載
  • callback：只要加載好所有依賴，webpack 就會執行此函數。require 函數的實現，做爲參數傳入此函數。當程序運行須要依賴時，可使用 require() 來加載依賴。函數體可使用此參數，來進一步執行 require() 模塊。
  • errorCallback：當 webpack 加載依賴失敗時，會執行此函數。
  • chunkName：由 require.ensure() 建立出的 chunk 的名字。經過將同一個 chunkName 傳遞給不一樣的 require.ensure() 調用，咱們能夠將它們的代碼合併到一個單獨的 chunk 中，從而只產生一個瀏覽器必須加載的 bundle。
• 使用方法一：

require.ensure([], function(require){
    require('./a.js');
});
// 此時會單獨打包出一個js文件，沒有自定義名稱的話，會被命名爲1.js(有hash時候會帶上md5)
複製代碼

• 使用方法二：

require.ensure(['./a.js'], function(require) {
    require('./b.js');
});
一、此時a.js做爲依賴被加載，可是沒有被執行（官方文檔說的only loads the modules）
二、a.js和b.js會被打包成一個文件。
三、回調函數裏只require了b.js，只有b.js的內容會被執行。
四、若是你須要使用a.js的內容，須要再加上require('./a.js')

require.ensure(['./list'], function(require){
    var list = require('./list');
    list.show();
});
給require.ensure的第一個參數傳了['./list']，執行到這裏的時候list.js會被瀏覽器下載下來，可是並不會執行list.js模塊中的代碼，也就是webpack官網說的，不會進行evaluate。真正進行evaluate的時候是到了後面這句var list = require('./list');這就是所謂的懶執行。
寫在函數中的多個模塊會被打包在一塊兒，這一點和上面沒有區別。另外，寫在數組中的模塊也會跟他們打包在一塊兒，無論你有沒有手動執行。
複製代碼

• vue中使用

comst List = resolve => {
    require.ensure([],() => {
        resolve(require('./list'))
    },'list')
}
其實resolve的做用就是Promise裏面那個resolve，在這裏就是定義一個異步的組件
複製代碼

使用動態 import語法

const Foo = () => import(/* webpackChunkName: "foo" */ './Foo.vue');
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})
// /* webpackChunkName: "foo" */使用命名chunk，一個特殊的註釋語法來提供 chunk name (須要 Webpack > 2.4)
// webpack要加配置 output須要加個chunkFilename
chunkFilename: '[name].js'
複製代碼