vue 中實現異步加載模塊

前提：使用vue官方腳手架搭建（webpack）

 

使用 vue-cli構建的項目,在 默認狀況下 ,執行 npm run build  會將全部的js代碼打包爲一個總體,這樣打包使單頁面的應用的體積比較大，浪費資源，一般的作法使用按需加載，以節約資源。

  寫法：const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')

 

require.ensure

　　1.語法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])

• dependencies: 依賴的模塊數組
• callback: 回調函數，該函數調用時會傳一個require參數
• chunkName: 模塊名，用於構建時生成文件時命名使用

　　2.說明: require.ensure在須要的時候才下載依賴的模塊，當參數指定的模塊都下載下來了（下載下來的模塊還沒執行），便執行參數指定的回調函數。require.ensure會建立一個chunk，且能夠指定該chunk的名稱，若是這個chunk名已經存在了，則將本次依賴的模塊合併到已經存在的chunk中，最後這個chunk在webpack構建的時候會單獨生成一個文件。

　　3.在執行cnpm run dev 後chunk會被生成一個單獨的js文件，當路由被訪問的時候才加載對應chunk組件，這樣就更加高效了。

 

參考：官方  https://router.vuejs.org/zh-cn/advanced/lazy-loading.html