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)

1. dependencies：字符串構成的數組，聲明 callback 回調函數中所需的所有模塊,模塊作為依賴被加載
2. callback：只要加載好全部依賴，webpack 就會執行此函數。require 函數的實現，作為參數傳入此函數。當程序運行需要依賴時，可以使用 require() 來加載依賴。函數體可以使用此參數，來進一步執行 require() 模塊。
3. errorCallback：當 webpack 加載依賴失敗時，會執行此函數。
4. 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');
});

1、此時a.js作為依賴被加載，但是沒有被執行（官方文檔說的only loads the modules）
2、a.js和b.js會被打包成一個文件。
3、回調函數里只require了b.js，只有b.js的內容會被執行。
4、如果你需要使用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'

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。