vue 路由懒加载中给 Webpack Chunks 命名的方法


Posted in Javascript onApril 24, 2020

最早的路由定义方式

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

进化版路由组件懒加载以及定义 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')
 }
]
...

这样写起来是完全没有问题的,但是路由很多的情况下,这里的代码量就会增加,我们能不能把「路径」与「组件」绑定的操作放大循环里面去做呢

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
})

这样就优雅了不少,但是我们的 chunk name 还没有加上去,这个时候就要用到 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 了

vue 路由懒加载中给 Webpack Chunks 命名的方法

到此这篇关于在 vue 路由懒加载中给 Webpack Chunks 命名的文章就介绍到这了,更多相关vue 路由懒加载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 & 模式)
Aug 04 Javascript
Javascript 类型转换方法
Oct 24 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 #Javascript
基于Vue实现微前端的示例代码
Apr 24 #Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 #Javascript
小程序开发之模态框组件封装
Apr 23 #Javascript
详解Vue3中对VDOM的改进
Apr 23 #Javascript
微信小程序实现滑动操作代码
Apr 23 #Javascript
微信小程序图片右边加两行文字的代码
Apr 23 #Javascript
You might like
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python pass详细介绍及实例代码
2016/11/24 Python
解决python删除文件的权限错误问题
2018/04/24 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Python按钮的响应事件详解
2019/03/04 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
Python之Sklearn使用入门教程
2021/02/19 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
毕业生实习鉴定
2013/12/11 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
文艺晚会开场白
2015/05/29 职场文书
大学军训口号大全
2015/12/24 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS