vue 路由懶加載中給 Webpack Chunks 命名的方法
更新時(shí)間：2020年04月24日 09:29:30 作者：huangyao_0606
這篇文章主要介紹了在 vue 路由懶加載中給 Webpack Chunks 命名的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
最早的路由定義方式
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About },
{ path: '/login', name: 'Login', component: Login }
]
const router = new VueRouter({
routes
})
export default router
進(jìn)化版路由組件懶加載以及定義 chunk name
...
const routes = [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "About" */ '../views/About.vue')
},
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "Login" */ '../views/Login.vue')
}
]
...
這樣寫(xiě)起來(lái)是完全沒(méi)有問(wèn)題的，但是路由很多的情況下，這里的代碼量就會(huì)增加，我們能不能把「路徑」與「組件」綁定的操作放大循環(huán)里面去做呢
const routeOptions = [
{ path: '/', name: 'Home' },
{ path: '/about', name: 'About' },
{ path: '/login', name: 'Login' }
]
const routes = routeOptions.map(route => {
return {
...route,
component: () => import(`@/views/${route.name}.vue`)
}
})
const router = new VueRouter({
routes
})
這樣就優(yōu)雅了不少，但是我們的 chunk name 還沒(méi)有加上去，這個(gè)時(shí)候就要用到 webpack 2.6.0 以上的占位符[ index ]和[ request ]
const routeOptions = [
{ path: '/', name: 'Home' },
{ path: '/about', name: 'About' },
{ path: '/login', name: 'Login' }
]
const routes = routeOptions.map(route => {
return {
...route,
component: () => import(/* webpackChunkName: "[request]" */ `../views/${route.name}.vue`)
}
})
const router = new VueRouter({
routes
})
build 一下就能看到想要的 chunk 了
到此這篇關(guān)于在 vue 路由懶加載中給 Webpack Chunks 命名的文章就介紹到這了,更多相關(guān)vue 路由懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中使用Canvas實(shí)現(xiàn)繪制二維碼
這篇文章主要為大家詳細(xì)介紹了如何在Vue中使用Canvas實(shí)現(xiàn)繪制二維碼，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2007-02-02
vue中vee validate表單校驗(yàn)的幾種基本使用
這篇文章主要介紹了vee-validate表單校驗(yàn)的基本使用,需要的朋友可以參考下2018-06-06
apache和nginx下vue頁(yè)面刷新404的解決方案
這篇文章主要介紹了apache和nginx下vue頁(yè)面刷新404的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滑動(dòng)解鎖功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
在現(xiàn)代前端開(kāi)發(fā)中,懶加載是一種提高應(yīng)用性能和用戶體驗(yàn)的重要技術(shù),尤其是在處理較大圖片或長(zhǎng)列表數(shù)據(jù)時(shí),本文將使用 Vue 3 和其新推出的 setup 語(yǔ)法糖來(lái)實(shí)現(xiàn)懶加載功能,并提供具體的示例代碼,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue Antd 輸入框Input自動(dòng)聚焦方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3 watch和watchEffect的使用以及有哪些區(qū)別
這篇文章主要介紹了vue3 watch和watchEffect的使用以及有哪些區(qū)別，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了Vue消息提示this.$message方法使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-09-09
解決vue無(wú)法偵聽(tīng)數(shù)組及對(duì)象屬性的變化問(wèn)題
這篇文章主要介紹了解決vue無(wú)法偵聽(tīng)數(shù)組及對(duì)象屬性的變化問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了vue-cli中使用高德地圖的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03