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 相关文章推荐
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
原生JS实现幻灯片
Feb 22 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
JavaScript点击按钮生成4位随机验证码
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实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
Python的Flask框架与数据库连接的教程
2015/04/20 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Django 路由系统URLconf的使用
2018/10/11 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
python mock测试的示例
2020/10/19 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
介绍信样本
2015/01/31 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript