vue | 懒加载

原来的 vue 策略都是把 js 放到一个文件中，懒加载是把各个页面的 js 都作为独立引入。

所以，最后请求的话，可以加载的更快。

所谓的懒加载是只有到了那个页面了，才加载相应的资源。

懒加载的使用非常简单。

在路由文件中，我们通常这样写。

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/pages/index/index.vue'
import weibo from '@/pages/weibo/index/index.vue'
import weibo_add from '@/pages/weibo/add/index.vue'
import medium from '@/pages/medium/index/index.vue'
import medium_add from '@/pages/medium/add/index.vue'
import quantify from '@/pages/quantify/index/index.vue'
import quantify_data from '@/pages/quantify/socket/index.vue'
import newone from '@/pages/newone/index/index.vue'
import tools from '@/pages/tools/index/index.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '主页',
      component: index
    },
    {
      path: '/weibo',
      name: '微博',
      component: weibo
    },
    {
      path: '/weibo_add',
      name: '微博添加',
      component: weibo_add
    },
    {
      path: '/quantify',
      name: '量化公告',
      component: quantify
    },
    {
      path: '/quantify_data',
      name: '量化展示',
      component: quantify_data
    },
    {
      path: '/tools',
      name: 'tools',
      component: tools
    },
    {
      path: '/medium',
      name: 'medium',
      component: medium
    },
    {
      path: '/medium_add',
      name: 'medium 添加',
      component: medium_add
    },
    {
      path: '/newone',
      name: '上新',
      component: newone
    },
  ]
})

上面的写法会把所有的 js 打包到一个 js 文件中，导致，文件体积爆炸。

懒加载的写法是这样的。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '主页',
      component: () => import("@/pages/index/index.vue")
    },
    {
      path: '/weibo',
      name: '微博',
      component: () => import("@/pages/weibo/index/index.vue")
    },
    {
      path: '/weibo_add',
      name: '微博添加',
      component: () => import("@/pages/weibo/add/index.vue")
    },
    {
      path: '/quantify',
      name: '量化公告',
      component: () => import("@/pages/quantify/index/index.vue")
    },
    {
      path: '/quantify_data',
      name: '量化展示',
      component: () => import("@/pages/quantify/socket/index.vue")
    },
    {
      path: '/tools',
      name: 'tools',
      component: () => import("@/pages/tools/index/index.vue")
    },
    {
      path: '/medium',
      name: 'medium',
      component: () => import("@/pages/medium/index/index.vue")
    },
    {
      path: '/medium_add',
      name: 'medium 添加',
      component: () => import("@/pages/medium/add/index.vue")
    },
    {
      path: '/newone',
      name: '上新',
      component: () => import("@/pages/newone/index/index.vue")
    },
  ]
})

这个会把自己的页面的 js 进行分开。