Vue中 webpackChunkName【魔法注释】
2023-02-18 16:29:05 时间
bug收集:专门解决与收集bug的网站
网址:www.bugshouji.com
component: () => import(/* webpackchunkname: "home" */ '../views/home.vue')
今天为大家分享:
Vue 懒加载中的注释 webpackchunkname
webpackChunkName 介绍
webpackChunkName 是为预加载的文件取别名,作用就是webpack在打包的时候,对异步引入的库代码(lodash)进行代码分割时(需要配置webpack的SplitChunkPlugin插件),为分割后的代码块取得名字
import 异步加载的写法实现页面模块lazy loading 懒加载(Vue中的路由异步加载):
Vue中运用import的懒加载语句以及webpack的魔法注释,在项目进行webpack打包的时候,对不同模块进行代码分割,在首屏加载时,用到哪个模块再加载哪个模块,实现懒加载进行页面的优化。
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')
}
]
动态设置的webpackChunkName
webpackChunkName: 新 chunk 的名称。从 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
})
苟有恒 , 何必三更眠五更起
相关文章
- Java回调函数代码实例?
- 深耕三十年终成CAD隐形冠军,这家工业软件企业凭什么?
- 初识shell脚本
- shell基础编程(一)
- Elastic-Job2.1.5源码-调度注册中心的设计原理
- Elastic-Job2.1.5源码-自定义Spring标签与Spring 依赖注入无缝整合
- 独家:创维-RGB高层再调整 集团总裁兼任业务“总指挥”
- Elastic-Job2.1.5源码-分布式场景下如何用逻辑分片来进行水平扩展的?
- Elastic-Job2.1.5源码-图解分片算法动画
- Elastic-Job2.1.5源码-图解错过作业重新触发执行功能
- Elastic-Job2.1.5源码-基于Zookeeper分布式锁实现选举作业主节点原理
- Elastic-Job2.1.5源码-作业高可用的失效转移功能实现原理动画
- 0898-7.1.7-如何在CDP中为Kafka集成OpenLDAP
- 0899-7.1.7-如何在CDP中安装Zeppelin并配置Interpreter
- 0900-7.1.7-如何设置Hive任务的超时时间
- 【Mac】Acrobat Reader DC 2020软件下载及安装教程
- 【Mac】Acrobat Reader DC 2019软件下载及安装教程
- Adobe Acrobat XI Pro软件下载及安装教程
- Acrobat Reader DC 2020软件免费下载及安装教程
- 教你如何下载网上的视频