我有一个通过Vue-cli创建的简单Vue Hello world应用程序。默认情况下，有一个路由器应该是惰性的。但正如我在浏览器网络选项卡中看到的那样，它并没有懒惰。它在第一页加载时一次加载所有组件。我所做的唯一一件事就是在路由器上添加一条路由。它看起来像文档示例。另外，正如文档所说，我已经安装了@babel/plugin语法动态导入，并更新了babel.config.js。有人能告诉我出了什么问题吗？
这是路由器代码：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/contact',
name: 'Contact',
component: () => import(/* webpackChunkName: "contact" */ '../views/Contact.vue'),
props: {
title: 'Contact',
test: 'Some test value',
}
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
这是babel.config.js文件
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
"@babel/plugin-syntax-dynamic-import"
]
}
好的，所以原因是预取内容。它以低优先级加载。这意味着它可以下载给定的资源，即使在页面中没有检测到。下载资源的优先级较低。
这就是它在生成的html:中的样子
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/favicon.ico">
<title>vue-hello-world</title>
<link href="/js/about.b54d7802.js" rel="prefetch">
<link href="/js/contact.35a4dd8d.js" rel="prefetch">
<link href="/css/app.f824e728.css" rel="preload" as="style">
<link href="/js/app.b9f6d9e9.js" rel="preload" as="script">
<link href="/js/chunk-vendors.2fe81e6e.js" rel="preload" as="script">
<link href="/css/app.f824e728.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but vue-hello-world doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong></noscript><div id="app"></div>
<script src="/js/chunk-vendors.2fe81e6e.js"></script>
<script src="/js/app.b9f6d9e9.js"></script>
</body>
</html>