vue项目中路由懒加载的正确使用

路由懒加载:

使用() => import();的方式导入组件
这样可以在进入当前路由的时候加载路由
如果不使用懒加载 会在第一次进入页面后 一次性加载所有路由 所以首屏加载会慢

如果一个项目过大 大量的使用路由懒加载会导致页面的热更新过慢

推荐在开发环境下不使用懒加载 这样有利于开发的效率
在生产环境可以使用路由懒加载

• 通过process.env.NODE_ENV可以访问到当前是什么环境
• 可以在utils文件夹下创建两个文件

util.import.development.js文件里是开发环境的导入方式

// file : 传入的文件名 和view拼接成路径
// 开发环境不需要使用懒加载  只要正常方式引入文件
module.exports = file => require('@/views/' + file).default;

util.import.production.js文件里一个是生产环境的导入方式

// file : 传入的文件名 和view拼接成路径
// 生产环境使用懒加载
module.exports = file => () => import('@/views/' + file);

然后在导入路由的时候

// 根据process.env.NODE_ENV的字段拼接路径
const _import = require('@/util.import.' + process.env.NODE_ENV);

 }
    path: 'index',
    name: 'index',
    meta: {
      title: '首页',
    },
    component: _import('system/index') // 传入文件名即可使用导入
  },