Asynchronous loading component naming in vue2 routing table
Introduction
In Vue2, when introducing components into the routing table, you can use Dynamic Import to load the components asynchronously to improve page loading speed and reduce the initial load size.
In this way, the asynchronously loaded component will be named with this comment /* webpackChunkName: "" /.
Detailed explanation on naming asynchronously loaded components
1. Why you need to use component naming
First of all, let’s be clear. If you don’t use component naming, there will be no impact. You can package the project normally. However, after webpack packages the component into a separate chunk file, the file will be named a number by default; this will affect developers. When debugging, the component package name cannot be provided to locate the problem.
At the same time, this naming can also help webpack perform code splitting when packaging, that is, packaging different components into different chunk files to achieve better performance optimization effects.
Therefore, the comment /* webpackChunkName: "" / is used, that is, after the component is named, webpack will name the packaged chunk file as our own defined name. Generally, this name is the same as our component name, which can facilitate developers during debugging. Secondly, it can help webpack perform code segmentation, improve page loading speed, and reduce the initial loading project size.
2. How to use component naming
// ...
const router = new Router({
routes: [
{
path: '/home',
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
meta: {
title: '首页' },
}
]
})
// ...
In the above example, in the route whose routing path is home, the corresponding page component is dynamically loaded, and the component naming is added to the import.