vue2.6 router.js 路由文件的这样写法是按需加载吗？

Question

现在第一次打开登录页面，把所有路由的页面.js全部加载了，第一次打开时间很长，
按网上的路由按需加载方式设置了，没有起作用。

export const constantRoutes = [
  {
    path: '/login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/login/index'),
    meta: {
      navigation: true
    },
    hidden: true
  }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({
    y: 0
  }),
  //base: "/Hisense/www/web/",
  routes: constantRoutes
})

const router = createRouter()

router.$addRoutes = (params) => {
  router.matcher = new Router({ // 重置路由规则
    routes: constantRoutes.concat(fixedRoutes)
  }).matcher
  router.addRoutes(params) // 添加路由
}

---

解决方法，
在服务器上开启gzip压缩，解决加载时间长的问题了。

Answer 1

在服务器上开启gzip压缩，解决加载时间长的问题了。

Answer 2

不是按需加载。

在 Vue 2.6 中，如果你的 router.js 文件中的路由配置没有正确地使用动态导入（import()），那么即使你按照网上的按需加载方式设置了，也可能没有实现真正的按需加载。

通常，按需加载（也称为代码分割）是通过动态导入来实现的。以下是一个基本的例子，展示了如何在 Vue Router 中使用动态导入来实现按需加载：

// router.js

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const routes = [
  {
    path: '/login',
    name: 'Login',
    // 使用动态导入实现按需加载
    component: () => import(/* webpackChunkName: "login" */ './views/Login.vue')
  },
  {
    path: '/home',
    name: 'Home',
    // 其他页面的按需加载
    component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
  },
  // 其他路由配置...
];

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

在上面的例子中，component 属性使用了箭头函数和 import() 语法来动态导入组件。Webpack 会识别这种语法，并自动将代码分割成单独的块（chunks），这些块只有在需要时才会被加载。

如果你的 router.js 文件中的路由配置没有使用这种动态导入的方式，而是直接引入了所有组件，那么所有相关的 .js 文件都会在应用启动时被加载，从而导致第一次打开时间很长。

请检查你的 router.js 文件，确保你使用了动态导入的方式，并且 Webpack 配置正确支持了代码分割。如果你已经这样做了，但问题仍然存在，可能需要检查其他可能的配置问题或代码错误。