创新项目实训——Vue项目部署优化之路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：

{
    path: '/idea_submission',
    name: 'Idea_Submission',
    component: () => import('../views/Idea_Submission'),
    meta: {
      title: 'MindFall-创意提交'
    },
  },

component (和 components) 配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。

注意

不要在路由中使用异步组件。异步组件仍然可以在路由组件中使用，但路由组件本身就是动态导入的。

如果你使用的是 webpack 之类的打包器，它将自动从代码分割中受益。

vue.config.js配置

chainWebpack: config => {
  config.plugins.delete('prefetch')
},