webpack+vue异步组件加载按需加载

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

// 将
// import UserDetails from './views/UserDetails'
// 替换成
const UserDetails = () => import('./views/UserDetails')

官方文档：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
例如：

import Vue from 'vue'
import Router from 'vue-router'
const Index = () => import('@/components/Index')//异步按需引入
Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index,//使用引入
    }
  ]
})

如遇报错需使用bable路由懒加载插件syntax-dynamic-import

npm install --save-dev babel-plugin-syntax-dynamic-import

配置.babelrc文件（若没有，则新建这个文件，和package.json同级）

{

    "plugins": ["syntax-dynamic-import"]

}

再次打包

npm run build

会发现根目录dist>static>js由一个较大的js文件变为了更多js文件，此时再访问会按需加载路由对应js，从而提高加载速度。

来自：http://www.qubiancheng1024.com/details/623fcbd88fe8934aa4300898