這篇文章主要介紹了vue如何實現(xiàn)路由按需加載的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue如何實現(xiàn)路由按需加載文章都會有所收獲，下面我們一起來看看吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、泰山網(wǎng)站維護(hù)、網(wǎng)站推廣。

為什么需要懶加載？

像vue這種單頁面應(yīng)用，如果沒有應(yīng)用懶加載，運用webpack打包后的文件將會異常的大，造成進(jìn)入首頁時，需要加載的內(nèi)容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利于用戶體驗，而運用懶加載則可以將頁面進(jìn)行劃分，需要的時候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力，減少首頁加載用時

• vue異步組件

• es提案的import()

• webpack的require,ensure()

1 . vue異步組件技術(shù) ==== 異步加載

vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實現(xiàn)按需加載 .
但是,這種情況下一個組件生成一個js文件

/* vue異步組件技術(shù) */

{ path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },

{ path: '/index', name: 'Index', component: resolve => require(['@/components/index'],resolve) },

{ path: '/about', name: 'about', component: resolve => require(['@/components/about'],resolve) }

非懶加載：

懶加載

2.組件懶加載方案二 路由懶加載(使用import)

const 組件名=() => import('組件路徑');
// 下面2行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代碼，指定了相同的webpackChunkName，會合并打包成一個js文件。
把組件按組分塊
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

{ path: '/about', component: About }, { path: '/index', component: Index }, { path: '/home', component: Home }

3.webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技術(shù)，也可以實現(xiàn)按需加載。
這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。

/* 組件懶加載方案三: webpack提供的require.ensure() */
{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') },
{ path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/index')), 'demo') },
{ path: '/about', name: 'about', component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01') }

// r就是resolve
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
// 路由也是正常的寫法  這種是官方推薦的寫的 按模塊劃分懶加載 
const router = new Router({
    routes: [
        {
           path: '/list/blog',
           component: list,
           name: 'blog'
        }
    ]
})

關(guān)于“vue如何實現(xiàn)路由按需加載”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“vue如何實現(xiàn)路由按需加載”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。