【问题标题】：Dynamically load vue components and resources into browser将 vue 组件和资源动态加载到浏览器中
【发布时间】：2021-05-03 09:18:48
【问题描述】：

我有一个包含多个“自定义模块”的 SPA，比如说“模块 A”和“模块 B”。这些模块本质上大不相同，模块 A 使用了几个“复杂”的 Vue 组件和与模块 B 无关的 javascript/typescript 文件（资源），反之亦然。

用户可以选择在这些模块之间切换。我希望根据用户的选择加载相关的资源，因此模块A中的所有资源都不会在选择模块B时对浏览器内存混淆。我正在使用 Webpack 进行捆绑。这在 SPA 中是否可行？

也许另一种解决方案是使用 Vue 的 'v-if' 或 '

【问题讨论】：

标签： javascript vue.js webpack

【解决方案1】：

只需使用Async Components

请注意，使组件异步的不是它的编写方式（从第一个两个示例中可以看出），而是它是如何导入和使用的......

new Vue({
  // ...
  components: {
    'ModuleA': () => import('./ModuleA'),
    'ModuleB': () => import('./ModuleB'),
  },
  computed: {
    moduleToUse() {
      return this.someUserPreferrences.activeModule // returns 'ModuleA' or 'ModuleB'
    }
  },
  template: `
   <div><component :is="moduleToUse" /></div>
  `
})

【讨论】：

【解决方案2】：

Vue 路由器延迟加载

I would like to only load the relevant resoures depending on the the user´s choice, so all of the resources in Module A isn´t cluttering up the browsers memory, when Module B is chosen.

有一个术语叫Vue Router Lazy-Loading。基本概念是，您可以将 vue 组件分成不同的组。假设您有两个用于模块 A（A 组）的组件和两个用于模块 B（B 组）的组件。

const Jan = () => import(/* webpackChunkName: "group-a" */ './Jan.vue')
const Feb = () => import(/* webpackChunkName: "group-a" */ './Feb.vue')
const Mar = () => import(/* webpackChunkName: "group-b" */ './Mar.vue')
const April = () => import(/* webpackChunkName: "group-b" */ './April.vue')

通过配置路由器延迟加载，四个组件不会捆绑到xxx-chunk.js，而是捆绑到xxx-a.js和xxx-b.js。

当您引用属于"group-a" 的Feb.vue 时，仅加载xxx-a.js。在这种情况下，xxx-b.js 不会同时加载。

Official Guide

我的构建

在我的一个代码库中，我将页面分成三组home_profile、terms 和policy。这些.vue 页面/组件并非全部嵌套在chunk-vendors.67613a87.js 中。


 dist\js\chunk-vendors.67613a87.js    78.33 KiB          27.43 KiB
  dist\js\home_profile.0fcdff92.js     23.93 KiB          6.96 KiB
  dist\js\terms.8d1717e3.js            17.48 KiB          6.58 KiB
  dist\js\policy.4da72a5e.js           13.76 KiB          4.90 KiB

路由器视图

用户可以选择在这些模块之间切换。

查看 Element UI NavBar，使用 :router="true" 导入它。您可以将所有页面.vue设置为同一父路由下的子路由。

【讨论】：

非常感谢，这似乎很有用，我会看看它！ ?