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 定时器调用传递参数的方法
Nov 12 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
Python实现全角半角转换的方法
2014/08/18 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
python实时监控cpu小工具
2018/06/21 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
python 5个顶级异步框架推荐
2020/09/09 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
毕业生求职自荐信怎么写
2014/01/08 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
学前教育专业求职信
2014/09/02 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
初婚初育证明范本
2014/11/24 职场文书
教代会闭幕词
2015/01/28 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
民事上诉状范文
2015/05/22 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
python实现A*寻路算法
2021/06/13 Python