前提：使用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