Vue中 webpackChunkName【魔法注释】
Vue 注释 魔法
2023-06-13 09:15:54 时间
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
})
苟有恒 , 何必三更眠五更起
相关文章
- Vue专题 05_详解vue生命周期的每个节点
- Vue之动态绑定属性
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- Vue笔记(11) vue-router
- 简述vue和jquery的区别「建议收藏」
- vue md5.js_VUE.js
- vue-cli 初始----安装运行Vue项目
- vue源码分析-从new Vue开始
- Vue Admin Work 系列框架又添新成员啦~
- Java项目分享-基于 SpringBoot + Vue的网页版聊天室
- 「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
- vue-property-decorator的简单介绍,一看就会
- vue页面刷新方法_vue返回上一页怎么实时刷新
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- Vue分页导航_vue分页组件
- Vue 实现小小记事本
- vue父子传值方式
- vue核心面试题:组件中的data为什么是一个函数
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- Vue快速连接Redis实现数据存储(vue 直连redis)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- 研究Oracle VUE价格探究深入探究和分析(oracle vue价格)