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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
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
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Python os.access()用法实例
2019/02/18 Python
Python的缺点和劣势分析
2019/11/19 Python
python计算导数并绘图的实例
2020/02/29 Python
python模拟实现分发扑克牌
2020/04/22 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
ET Mall东森购物网:东森严选
2017/03/06 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
商务英语应届生自我鉴定
2013/12/08 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
项目安全员岗位职责
2015/02/15 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
导游词之天津盘山
2019/11/01 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏