剛接觸vue-router時舱痘，router中引入視圖方式如下：
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/views/index/index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component: Index
}
],
mode:'history'
})
執(zhí)行npm run build钓觉，生成的打包文件主要有app,manifest,vendor文件派殷；隨著view的定義越多app文件越大还最，從而頁面加載速度變慢
| Chunk Names | Size |
|---|---|
| app.b8ab3a48bde7b3e6e94c.js | 227KB |
| manifest.3a87fa67b93a7a61bbff.js | 1.41KB |
| vendor.157a7bf99b19dbb4a259.js | 325KB |
如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時候才加載對應(yīng)組件毡惜，這樣就更加高效了拓轻，這里我們采用require,參考資料vue加載異步組件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
// 這個特殊的 `require` 語法將會告訴 webpack
// 自動將你的構(gòu)建代碼切割成多個包，這些包
// 會通過 Ajax 請求加載
routes: [
{
path: '/',
name: 'index',
component: resolve => require(['@/views/index/index'], resolve)
}
],
mode:'history'
})
執(zhí)行npm run build经伙，生成對應(yīng)打包js文件
| Chunk Names | Size |
|---|---|
| 0.e6876fdbc6a330b108b8.js | 323KB |
| app.5299b921c5b1b290d494.js | 41.1KB |
| manifest.edc5506366fddf27c1f7.js | 1.49KB |
| vendor.022888f101c69264e9c0.js | 218KB |
index.html頁面中引入了app,manifest,vendor三個js文件扶叉，沒有引入0.e6876fdbc6a330b108b8.js文件。這塊應(yīng)該是內(nèi)部處理邏輯了帕膜。不難猜測require一個view會生成一個js文件
// index.html
<script type=text/javascript src=/static/js/manifest.edc5506366fddf27c1f7.js></script>
<script type=text/javascript src=/static/js/vendor.022888f101c69264e9c0.js></script>
<script type=text/javascript src=/static/js/app.5299b921c5b1b290d494.js></script>
在這里我們require2次 “ @/views/searchList/App”枣氧，我們知道app，manifest垮刹，vendor是會存在的达吞，那么生成5個js文件么？然而build后打包構(gòu)建生成4個文件
{
path: '/smSearch',
name: 'smSearch',
component: resolve => require(['@/views/searchList/App'], resolve)
},
{
path: '/searchList/:keyword',
name: 'searchKeyWord',
component: resolve => require(['@/views/searchList/App'], resolve)
}
第二種方式：使用import關(guān)鍵字引入,這個import('XXX')函數(shù)會返回一個Promise對象;參考資料vue-router路由懶加載
{
path: '/',
name: 'index',
component:() => import('@/views/index/index')
}
據(jù)說require.ensure也可以實現(xiàn)荒典，我在本地試用了沒有效果 >.< 酪劫。代碼貼出來,請大神指教，不管chunkName（第三個參數(shù)）指定是否同個字符串寺董。都是生成app覆糟，manifest，vendor文件遮咖。參考資料require.ensure
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component:resolve => require.ensure([],()=>resolve(require('@/views/index/index')),'demo')
},
{
path:'/groupPurchase',
name:'groupPurchase',
component: resolve => require.ensure([],()=>resolve(require('@/views/groupPurchase/App')),'demo')
}
],
mode:'history'
})
