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 相关文章推荐
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
JS 创建对象的模式实例小结
Apr 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实现JS中escape与unescape的方法
2016/07/11 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
document.write的几点使用心得
2014/05/14 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python实现二分查找算法
2017/09/21 Python
python调用自定义函数的实例操作
2019/06/26 Python
多个python文件调用logging模块报错误
2020/02/12 Python
css3 transform属性详解
2014/09/30 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
linux面试题参考答案(8)
2016/04/19 面试题
2013年高中生自我评价
2013/10/23 职场文书
酒吧总经理岗位职责
2013/12/10 职场文书
《满井游记》教学反思
2014/02/26 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
Python使用scapy模块发包收包
2021/05/07 Python
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android