docs: update Lazy Loading docs (#2618)

Author: skirtles-code

packages/docs/guide/advanced/lazy-loading.md

@@ -11,14 +11,14 @@ Vue Router supports [dynamic imports](https://developer.mozilla.org/en-US/docs/W
 
 ```js
 // replace
-// import UserDetails from './views/UserDetails'
+// import UserDetails from './views/UserDetails.vue'
 // with
 const UserDetails = () => import('./views/UserDetails.vue')
 
 const router = createRouter({
   // ...
   routes: [
-    { path: '/users/:id', component: UserDetails }
+    { path: '/users/:id', component: UserDetails },
     // or use it directly in the route definition
     { path: '/users/:id', component: () => import('./views/UserDetails.vue') },
   ],
@@ -27,8 +27,6 @@ const router = createRouter({
 
 The `component` (and `components`) option accepts a function that returns a Promise of a component and Vue Router **will only fetch it when entering the page for the first time**, then use the cached version. Which means you can also have more complex functions as long as they return a Promise:
 
-<RuleKitLink />
-
 ```js
 const UserDetails = () =>
   Promise.resolve({
@@ -38,34 +36,32 @@ const UserDetails = () =>
 
 In general, it's a good idea **to always use dynamic imports** for all your routes.
 
-::: tip Note
-Do **not** use [Async components](https://vuejs.org/guide/components/async.html) for routes. Async components can still be used inside route components but route component themselves are just dynamic imports.
-:::
+When using a bundler like Vite or webpack, this will automatically benefit from [code splitting](https://webpack.js.org/guides/code-splitting/).
 
-When using a bundler like webpack, this will automatically benefit from [code splitting](https://webpack.js.org/guides/code-splitting/)
+<RuleKitLink />
 
-When using Babel, you will need to add the [syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import/) plugin so that Babel can properly parse the syntax.
+## Relationship to async components
 
-## Grouping Components in the Same Chunk
+Vue Router's lazy loading may appear similar to Vue's [async components](https://vuejs.org/guide/components/async.html), but they are distinct features. Do **not** use async components as route components. An async component can still be used inside a route component but the route component itself should just be a function.
 
-### With webpack
+## Relationship to functional components
 
-Sometimes we may want to group all the components nested under the same route into the same async chunk. To achieve that we need to use [named chunks](https://webpack.js.org/guides/code-splitting/#dynamic-imports) by providing a chunk name using a special comment syntax (requires webpack > 2.4):
+While not common, it is possible to use a [functional component](https://vuejs.org/guide/extras/render-function.html#functional-components) as a route component. However, Vue Router needs some way to differentiate between functional components and lazy loading. To use a functional component we must give the function a `displayName`:
 
-```js
-const UserDetails = () =>
-  import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
-const UserDashboard = () =>
-  import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
-const UserProfileEdit = () =>
-  import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')
+```ts
+const AboutPage: FunctionalComponent = () => {
+  return h('h1', {}, 'About')
+}
+AboutPage.displayName = 'AboutPage'
 ```
 
-webpack will group any async module with the same chunk name into the same async chunk.
+## Grouping Components in the Same Chunk
+
+We may want to group all the components nested under the same route into the same chunk, so they can all be loaded with a single request.
 
 ### With Vite
 
-In Vite you can define the chunks under the [`rollupOptions`](https://vite.dev/config/build-options.html#build-rollupoptions):
+We can define the chunks under the [`rollupOptions`](https://vite.dev/config/build-options.html#build-rollupoptions):
 
 ```js [vite.config.js]
 export default defineConfig({
@@ -85,3 +81,18 @@ export default defineConfig({
   },
 })
 ```
+
+### With webpack
+
+We can specify the [chunk name](https://webpack.js.org/api/module-methods/#webpackchunkname) using a special comment syntax:
+
+```js
+const UserDetails = () =>
+  import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
+const UserDashboard = () =>
+  import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
+const UserProfileEdit = () =>
+  import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')
+```
+
+webpack will group any async module with the same chunk name into the same async chunk.

packages/docs/guide/index.md

@@ -71,15 +71,6 @@ export const router = createRouter({
 
 The `routes` option defines the routes themselves, mapping URL paths to components. The component specified by the `component` option is the one that will be rendered by the `<RouterView>` in our earlier `App.vue`. These route components are sometimes referred to as _views_, though they are just normal Vue components.
 
-It's worth noting that if you want to use _functional components_ as route components, you must give them a `displayName` so they can be differentiated from [lazy loaded routes](./advanced/lazy-loading.md):
-
-```ts
-const AboutPage: FunctionalComponent = () => {
-  return h('h1', {}, 'About')
-}
-AboutPage.displayName = 'AboutPage'
-```
-
 Routes support various other options that we'll see later in the guide, but for now we only need `path` and `component`.
 
 The `history` option controls how routes are mapped onto URLs and vice versa. For the Playground example we're using `createMemoryHistory()`, which ignores the browser URL entirely and uses its own internal URL instead. That works well for the Playground, but it's unlikely to be what you'd want in a real application. Typically, you'd want to use `createWebHistory()` instead, or perhaps `createWebHashHistory()`. We'll cover that topic in more detail in the guide to [History modes](./essentials/history-mode).