Vue 路由懒加载 - 提高页面加载速度的技巧 - 常规

路由懒加载是指在使用 Vue.js 进行前端开发时，将路由组件按需加载，而不是一次性加载所有路由组件。这样可以减少页面加载时间，提高用户体验。

在 Vue.js 中，可以通过异步组件和 Webpack 的代码分割功能实现路由懒加载。具体步骤如下：

定义路由时，将组件改为使用 import() 函数来加载：

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

在 Webpack 配置中，使用 babel-plugin-syntax-dynamic-import 插件来支持动态导入语法：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
  // ...
}

在 .babelrc 文件中，添加 syntax-dynamic-import 插件：

{
  "plugins": ["syntax-dynamic-import"]
}

这样，当访问到某个路由时，对应的组件才会被下载并加载，而不是一开始就加载所有路由组件。这样能够提高页面加载速度，特别是在应用程序较大时效果更明显。