使用Vue CLI 3、Webpack和Vue路由器延迟加载组件

2019-05-24137次阅读vue

SPA(单页应用程序)通常由数十个甚至数百个组件组成,这些组件可以分成几个JavaScript包文件。本文的目标是展示一种方法来完成这个划分以及当路由更改时异步加载组件文件。此异步行为称为延迟加载,并允许较小的初始包大小。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

上例中home.vue和about.vue两个组件文件在应用程序初始化时就加载了。对于具有大量组件文件的项目,一次加载所有文件通常是不可行的。由于即将推出的JavaScript功能,即webpack支持import()动态导入,我们可以轻松实现延迟加载。

现在将src/router.js文件更改为以下内容:

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

Vue.use(Router)

function loadView(view) {
  return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
}

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: loadView('Home')
    },
    {
      path: '/about',
      name: 'about',
      component: loadView('About')
    }
  ]
})

1、删除了home和about组件的import静态导入。

2、创建了loadview函数,它使用import函数动态导入Vue组件。

3、在import函数中,我们使用/* webpackChunkName: "view-[request]" */标记将动态导入每个文件的名称。

4、路由配置使用loadView方法,并传递组件的名称。

上述loadview函数实现的等同于我们手动每一项的添加:

这样,当我们通过npm run build或者yarn build编译项目时会看到以下结果:

请注意,已创建两个文件:view-Home-vue...和view-About-vue...。它们将在生产服务器上按需加载:

上一篇: a模拟window.open打开窗口  下一篇: vue router之后如何回到顶部  

使用Vue CLI 3、Webpack和Vue路由器延迟加载组件相关文章