在Vue專案中，一般使用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檔案，如果頁面一多，會導致這個檔案非常大，載入緩慢，為了解決這個問題，需要將他分成多個小檔案，而且還要實現非同步按需載入，即用到了再載入，而不用一股腦全部載入

　　1.webpack提供的require.ensure(),這樣可以實現按需載入，並且你可以將多個相同類的元件打包成一個檔案，只要給他們指定相同的chunkName即可，如示例中的demo將會打包成一個檔案。

        {
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: r => require.ensure([], () => r(require('../components/PromiseDemo')), 'demo')
        },
        {
            path: '/hello',
            name: 'Hello',
            // component: Hello
            component: r => require.ensure([], () => r(require('../components/Hello')), 'demo')
        }
 

　　2.Vue的非同步元件技術，這種方法可以實現按需載入，並且一個元件會打包成一個js檔案

 {
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: resolve => require(['../components/PromiseDemo'], resolve)
        }

　　3.es提案的import（），也是我推薦的方法

　　首先，可以將非同步元件定義為返回一個 Promise 的工廠函式 (該函式返回的 Promise 應該 resolve 元件本身)：

const Foo = () => Promise.resolve({ /* 元件定義物件 */ })

　　第二，在 Webpack 2 中，我們可以使用動態 import語法來定義程式碼分塊點 (split point)：

import('./Foo.vue') // 返回 Promise

　　注意：如果您使用的是 Babel，你將需要新增 syntax-dynamic-import 外掛，才能使 Babel 可以正確地解析語法。

　　結合這兩者，這就是如何定義一個能夠被 Webpack 自動程式碼分割的非同步元件。

const Foo = () => import('./Foo.vue')

　　這樣做的結果是每個元件都會打包成一個js檔案，有時候我們想把某個路由下的所有元件都打包在同個非同步塊 (chunk) 中。只需要使用 命名 chunk，一個特殊的註釋語法來提供 chunk name

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

來源