Vue路由元件按需載入的幾種方法

前端小兵發表於2019-03-13
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');
});
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'
複製程式碼

相關文章