vue2路由表中异步加载组件命名
简介
在Vue2中,路由表中引入组件时,可以使用动态导入(Dynamic Import)的方式来异步加载组件,以提升页面加载速度和降低初始加载的体积。
在这种方式下,会配合这种注释 /* webpackChunkName: “” / 来对异步加载的组件进行命名。
关于异步加载的组件命名的详细解释
一、为什么需要使用组件命名
首先,明确一点,如果不使用组件命名不会有什么影响,可以正常进行项目打包,但是webpack将组件打包成一个单独的chunk文件后,该文件会被默认命名为一个数字;这样会影响开发者在调试时无法提供组件包名去定位问题。
同时,这种命名还可以帮助webpack在打包时进行代码分割,也就是将不同的组件打包成不同的chunk文件,以达到更好的性能优化效果。
因此,使用了注释/* webpackChunkName: “” /,也就是组件命名后,webpack会将打包的chunk文件命名为我们自己定义的名称,一般这个名称与我们的组件名称一样,可以方便开发者在调试时定位问题;其次,可以帮助webpack进行代码分割,提高页面加载速度,降低初始加载的项目体积。
二、如何使用组件命名
// ...
const router = new Router({
routes: [
{
path: '/home',
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
meta: {
title: '首页' },
}
]
})
// ...
上面示例中,在路由路径为home的路由中,动态加载对应的页面组件,在import里面添加了组件命名。