VUE 首次打开页面加载资源过大的解决办法

作为一个Java开发者，真的是要做一个百变金刚。（日常吐槽，请略过.......）

        公司没有专职的前端开发，老板需要做一个vue的App，作为自命不凡的未来的软件架构师的我，接下了这个毫无头绪的摸不着东南西北的小项目。所有的东西开发完成，上线部署，发现第一次访问都会很慢，之后就变快了。F12 打开，查看请求，发现app.js这个文件竟然有13.1M（如下图），这么大的一个文件，要在第一次访问的时候加载进来，实在是考验用户的忠实程度，凡是没有120分耐心的人，都会在2秒内关闭，更何况有的人网速慢要等个10秒呢！

 

      既然出现了问题，就要想办法解决，于是上网找各种资料，了解到，出现第一次加载会请求过大的文件的原因在于没有采用懒加载的方式，所有的资源文件都会在第一次访问的时候请求过来，so，决定采用路由懒加载的方式，进行改装。以下是原本路由的配置方式：

import Wechat_login from './views/login.vue'
import Wechat_index from './views/index.vue'
import ProductShow from './views/wechat/ProductShow.vue'
import DevShow from './views/wechat/DevShow.vue'
import OrderShow from './views/wechat/OrderShow.vue'
import DevMonitor from './views/wechat/DevMonitor.vue'


let routes = [
    {
        path: '/',
        component: Wechat_login,
        name: '',
        hidden:true
    },
    {
        path: '/404',
        component: NotFound,
        name: '',
        hidden: true
    },{
        path: '/login',
        component: Wechat_login,
        name: '',
        hidden: true
  },
    {
      path: '/wechat',
      component: Wechat_index,
      children: [
        { path: '/', component: ProductShow, name: '', hidden: true },
        { path: '/wechat/ProductShow', component: ProductShow, name: '生产看板', hidden: true },
        { path: '/wechat/DevShow', component: DevShow, name: '设备看板', hidden: true },
        { path: '/wechat/OrderShow', component: OrderShow, name: '订单看板', hidden: true },
        { path: '/wechat/DevMonitor', component: DevMonitor, name: '设备监控', hidden: true },
        {
          path: '/wechat/DevShowDetail/:deviceId',
          component: DevShowDetail,
          name: '',
          hidden: true
        }
    ]}
]

使用路由懒加载的方式配置如下：

 export default[
    {
      path: '/',
      component: resolve => require(['@/views/login'], resolve),// Wechat_login,
      // component: Wechat_login,// ,
      name: '',
      hidden: true
    },
    {
      path: '/404',
      component: resolve => require(['@/views/404'], resolve),
      name: '',
      hidden: true
    }, {
      path: '/login',
      component: resolve => require(['@/views/login'], resolve),
      name: '',
      hidden: true
    },
    {
      path: '/wechat',
      component: resolve => require(['@/views/index'], resolve),//Wechat_index,
      children: [
        {path: '/', component: resolve => require(['@/views/wechat/ProductShow'], resolve), name: '', hidden: true},
        {
          path: '/wechat/ProductShow',
          component: resolve => require(['@/views/wechat/ProductShow'], resolve),
          name: '生产看板',
          hidden: true
        },
        {
          path: '/wechat/DevShow',
          component: resolve => require(['@/views/wechat/DevShow'], resolve),
          name: '设备看板',
          hidden: true
        },
        {
          path: '/wechat/OrderShow',
          component: resolve => require(['@/views/wechat/OrderShow'], resolve),
          name: '订单看板',
          hidden: true
        },
        {
          path: '/wechat/DevMonitor',
          component: resolve => require(['@/views/wechat/DevMonitor'], resolve),
          name: '设备监控',
          hidden: true
        },
        {
          path: '/wechat/DevShowDetail/:deviceId',
          component: resolve => require(['@/views/wechat/DevShowDetail'], resolve),// DevShowDetail,
          name: '',
          hidden: true
        }]
    }
]

配置过懒加载方式后，再次看请求的结果：

哇，真的是天壤之别，一下子从13.4M缩小到了883k，打开的速度一下子提升了十几倍。

（术业有专攻呐，如果是一个专业的前端开发人员，他应该直接就能想到结果吧。。。）