vue路由的优化

使用到vue-router时，webpack会将所有组件打包在一个js文件中，这样就导致这个文件非常大，从而会影响首页的加载，

最好的方法就是将其他路由分别打包到不同js文件中，切换路由时再加载对应js文件。当路由被访问的时候才加载对应组件，这样就更加高效了。

在index。js文件中配置好不同的js文件

import Vue from 'vue'
import Router from 'vue-router'
import page1 from './page1'
import page2 from './page2'
import page3 from './page3'
Vue.use(Router)
export default new Router({
  scrollBehavior(to,from,savedPosition){
    if(savedPosition){
      return savedPosition;
    }else{
      return{x:0,y:0}
    }
  },
  routes:[].concat(page1)
    .concat(page2)
    .concat(page3)
})

这里采用一种代码分块的语法，使用 AMD 风格的 require
比如在page1.js文件中

const Home = resolve => require(['@/components/Home'], resolve);

const Login = resolve => require(['@/components/Login/Login'], resolve);

export default [
  {
    path: '/',
    name: 'Home',
    component: Home
  },]

转载于:https://www.cnblogs.com/zengxx/p/9961851.html