Vuejs大应用懒加载动态组件

Posted 2023-02-23

【中文标题】Vuejs大应用懒加载动态组件

【英文标题】：Vuejs large application lazy loading dynamic components

【发布时间】：2017-07-30 23:43:09

【问题描述】：

我正在尝试构建一个 vuejs 应用程序，该应用程序将包含数百个（如果不是数千个）“表单”或“页面”组件，这些组件都会在动态 <component is=''> 标记中被换出。问题是必须导入每个组件。有没有办法根据路由参数动态导入组件？到目前为止，我有以下内容，但它不起作用：

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

Vue.use(Router)

const Hello = resolve => require(['@/components/Hello.vue'], resolve)

export default new Router(
  routes: [
    path: '/',
    name: 'Hello',
    component: Hello
  , 
    path: '/:name',
    name: 'Dynamic',
    component : 
      template: '<component :is="$route.params.name"></component>',
      watch: 
        '$route': function(to) 
          window[to.params.name] = resolve => require(['@/components/' + to.params.name + '.vue'], resolve)
          Vue.component(to.params.name, window[to.params.name])
          console.log(to.params.name)
        
      
    
  ]
)

【问题讨论】：

也许这会有所帮助？ gist.github.com/Rich-Harris/ea561810900eedd2a8e9afbc78ddd566 另见 SystemJS github.com/systemjs/systemjs

【参考方案1】：

一种方法，假设所有组件都存储在一个目录中（从技术上讲，只要加载器文件抓取并导入它们，它们就可以存储在任何地方）。

import Vue from 'vue'
import Router from 'vue-router'
import Components from './components'

Vue.use(Router)

const Hello = resolve => require(['@/components/Hello.vue'], resolve)

export default new Router(
  routes: [
    path: '/',
    name: 'Hello',
    component: Hello
  , 
    path: '/:name',
    name: 'Dynamic',
    component : 
      template: '<component :is="Components[$route.params.name]"></component>'
    
  ]
)

然后在./components/index.js 里面假设你所有的组件都是 .vue 文件：

const files = require.context('.', false, /\.vue$/)
const modules = 
files.keys().forEach((key) => 
  modules[key.replace(/(\.\/|\.vue)/g, '')] = files(key)
)

export default modules

我还没有测试过这个实现，但是加载目录文件的方法是我如何在某些区域使用它安装到应用程序中，您不希望每次都更新支持的前端代码）。