vue-router按需加载

Vue Router 的按需加载可以通过懒加载（lazy loading）实现，以减少首次加载时的文件大小。当你使用 `component: () => import()` 或者动态导入的方式时，组件实际是在第一次导航到该路由时才开始加载。

1. **引入按需加载**[^1]:

// router.js
const Product = () => import('./pages/Product.vue'); // 使用动态导入
export default new Router({
  routes: [
    {
      path: '/product',
      name: 'product',
      component: Product, // 当访问/product路径时，Product组件才会被加载
    },
  ],
});

2. **解决报错**[^2]:
有时候，`import()` 函数可能会因为Webpack配置不当或者模块查找路径错误而报错。确保你的配置支持ES6的动态导入，例如更新Webpack配置中的`optimization.runtimeChunk`选项：

// webpack.config.js
module.exports = {
  optimization: {
    runtimeChunk: 'single', // 将运行时代码拆分成单独的chunk
  },
};

按需加载可以显著提高首屏加载速度，但要确保配合正确的Webpack配置才能正常工作。