使用到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   },]